基于vue手写树插件的东西

前言

树树控制在前端开发中至关重要，现在大多数网站都采用树显示进行数据显示。因为显示所有的大数据对用户来说是不友好的。今天，我们手写了一个Tree插件。

iview提供的控件

Iview非常成熟。如果我写的控件比iview提供的控件好，那一定是iview。手写控件只是为了更好地理解vue的父组件和子组件之间的通信。请不要将我的控制与iview或其他第三方进行比较。让我们先来看看iview的树控件是如何使用的

模板树： data=' data 2 ' show-checkbox/Tree/template script导出默认值{ data(){ return { data 2:[{ title : ' parent 1 '，expand : true，children :[{ title : ' leaf 1-1-1 ' }，title :' leaf 1-1-2'}]}

使用树控件时，模板中可以使用以下树(根据您自己的要求)

然后是控件的一些事件捕获

子节点的一些设置

iview的树形总结就是一句话：到位！在这里，边肖还建议大家使用iview进行开发。这个框架对后端程序员来说是一个好处。因为不需要了解太专业的前端，可以满足80%的需求。

手写控制

同样的，我们先来看看他的用法其实和iview是一样的。只需使用我们的打包模板。下面是制作部门树。人事职能挂在部门下面。

zx tree v-if=' UserChange ' class=' item ' tree key=' DepTid ' tree name=' DepTname ' tree children=' children ' : model=' DepTdata ' : ids=' SysUserRole . DepTids : names=' SysUserRole。dept names ' @ keyname=' selecteduserobj '/zxhterijs是填写上面的数据，比如deptData和sysuserrole。至于这些属性意味着什么，我们就不要担心了。让我们从效果图开始。

那么，我们的zxhtree控件在哪里注册？这里是从component . js vue.component(' zx tree '，{})中提取的；继续在zxhtree中看到绑定节点是template: '#tree-template '。树模板的模板是在component.html写的

脚本类型=' text/x-template ' id=' tree-template ' div tree-item class=' item ' : tree key=' tree key ' v-for='(模型，索引)在模型' : tree name=' tree name ' : tree children=' tree children ' : model=' model ' : ids=' ids ' : names=' name ' @ keyname=' selectedObj ' @ data=Synchdata '/tree-tree这里是包裹树，所以包裹了一层模板。树项目对应的模板代码为

脚本类型=' text/x-template ' id=' item-template ' ul class=' z tree ' Li class=' level 0 ' @ blur=' blur ' @ focus=' focus ' tabindex=' 0 ' hide focus=' true ' tree node=' input type=' checkbox ' : disabled=' model。禁用' : ref=' model[tree name]' : checked=' check status ' @ click=' selectedObj '/span title=' ' @ click=' toggle '可以很明显的看到这里我们使用了递归进行展示树形结构。因为树形结构你无法确定层级。所以在里面又使用了针对子节点的展示树项目。

属性含义示例treekey内部树形展示deptId vistreekey树形展示关键部门身份默认显示的数据无名称默认显示的数据无树名内部真是展示数据deptName vistreename树形展示数据部门名称树子级当前树的子节点数据无模型当前树的数据无(男性)主题名称用于接受返回的数据无

手写控件扩展

控件接受数据处理逻辑

//接收到数据在外面套一层如果(这个。模型[这个。树键]==未定义){ this。树键=这个。vistreekey}如果(这个。模型[这个。树名称]==未定义){这。树名=这个。vistreename}如果(这个。模特。disabled==true){ this。模特。disabled=' disabled}console.log('组件注册了吗');if('，' this.ids '，').indexOf('，' this.model[this.treekey]'，')===-1){ this。CheckStatus=false这个。模特。CheckStatus=这个。CheckStatus} else { this . CheckStatus=true this。模特。CheckStatus=这个。CheckStatus这个。树键[这个。模型[这个。树键]]=这个。CheckStatus这个。树名[这个。模型[这个。树名]]=这个。CheckStatus这个。选择。key=这个。树键；这个。opt[' name ']=这个。树名；}if(this.ids！=' '){ var idarr=this。id；for(idarr中的var索引){ this。树键[idarr[index]]=true；} if (this.names.indexOf('，')==-1this.names！=' '){这个。树名[这个。name]=true；} else { var name arr=this。名字。split('，')；for(姓名arr中的定义变量索引){这个。treenames[name arr[index]]=true；} }}渲染默认数据

var newOpt={'key':{}，' name ' : { }；新选项。key=object。分配(这个。选择。关键，选择。键)；新选项。name=object。分配(这个。选择。名字，选择。姓名)；定义变量标志=falsefor(这个。模型[这个。树上的孩子]中的var索引){ if(NewOpt。关键[这个。模型[这个。树子代][索引][这个。树键]]！=true){ flag=true；} } if(！flag){ NewOpt。关键[这个。模型[这个。树键]]=true；纽波特。命名[这个。模型[这个。树名称]]=true；this.checkStatus=truethis。模特。CheckStatus=true} for(新选项中的定义变量键){这个。filterrealcheck(新的opt[key])；} this.opt=newOpt这个$emit('keyname '，NewOpt)；选择节点数据处理

鼠标事件的选定实例){ this.checkStatus=！this . CheckStatus } else { this . CheckStatus=选中；}这个。模特。CheckStatus=这个。CheckStatusif (this.model.expected！=true){这。树键[这个。模型[这个。树键]]=这个。CheckStatus这个。树名[这个。模型[这个。树名]]=这个。CheckStatus这个。选择。key=这个。树键；这个。opt[' name ']=这个。树名；}for(var索引在此$refs.child){ this .$refs.child[index].选择对象(这个。check STatus)；}这个$emit('keyname '，这个。opt)；手写控件总结

因为作者关注的是后端，前端知识不是很好，这个组件写得一塌糊涂。这个组件之前是临时写的。没有系统梳理，上面的逻辑也很乱。读者可以选择以下加入团队(#addMe)并联系我。

好了，这就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。