基于vue如何实现tree插件

这篇文章将为大家详细讲解有关基于vue如何实现tree插件，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

iview提供的控件

iview已经很成熟了，如果说我写的控件和iview提供的控件谁更好，那肯定是选择iview ， 手写控件只是为了更好的了解vue父子组件之间的通信的。 请读者还是不要拿我的控件和iview或者其他第三方的去对比。下面我们先来看看iview的Tree控件如何使用

<template>   <Tree :data="data2" show-checkbox></Tree> </template> <script>   export default {     data () {       return {         data2: [           {             title: 'parent 1',             expand: true,             children: [               {                 title: 'parent 1-1',                 expand: true,                 children: [                   {                     title: 'leaf 1-1-1'                   },                   {                     title: 'leaf 1-1-2'                   }                 ]               },               {                 title: 'parent 1-2',                 expand: true,                 children: [                   {                     title: 'leaf 1-2-1'                   },                   {                     title: 'leaf 1-2-1'                   }                 ]               }             ]           }         ]       }     }   } </script>

上述的代码形成的效果如下

在使用Tree控件时在Template中还有如下树形可以使用(根据自己需求)

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

子节点的一些设置

对于iview的Tree总结就是一句话：到位！。在这里小编也推荐大家使用iview来开发。这个框架对于后端程序员来说是个福利。因为我们不需要了解太专业的前端的只是就能够满足80%的需求了。

手写控件

同样的我们先来看看他的用法其实和iview一样。用我们封装好的模板就行了。下面是做一个部门树。部门下面挂着人员这个功能。

<zxhtree     v-if="userChange"     class="item"     treekey="deptId"     treename="deptName"     treechildren="children"     :model="deptData"     :ids="sysUserRole.deptIds"     :names="sysUserRole.deptNames"     @keyname="selectedUserObj" > </zxhtree>

js就是去填补上述的数据，比如deptData、sysUserRole这些。至于这些属性代表什么意思我们先不着急看。先上个效果图。

那么我们的zxhtree控件是在哪里注册的呢，这里被我们抽离在component.js里。Vue.component('zxhtree', {});
继续在zxhtree里看除绑定的节点是template: '#tree-template'。
tree-template的模板是在component.html中写好的

<script type="text/x-template" id="tree-template">   <div>     <tree-item         class="item"         :treekey="treekey"         v-for="(model, index) in model"         :treename="treename"         :treechildren="treechildren"         :model="model"         :ids="ids"         :names="names"         @keyname="selectedObj"         @data="synchdata"     >     </tree-item>   </div> </script>

而在tree-template用到的tree-item控件才是真正的tree控件。这里是为了将树形包裹起来，所以才包裹了一层模板。
tree-item对应的模板代码是

<script type="text/x-template" id="item-template">   <ul class="ztree">     <li class="level0" @blur="blur" @focus="focus" tabindex="0" hidefocus="true" treenode="">       <input type="checkbox" :disabled="model.disabled" :ref="model[treename]" :checked="checkStatus" @click="selectedObj"/>       <span title="" @click="toggle" :class="openStatus" treenode_switch=""></span>       <a :class="selectClass" treenode_a="" onclick="" target="_blank"  :title="model[treename]">         <span title="" treenode_ico="" class="button ico_open" ></span>         <span @dblclick="toggle" class="node_name">{{model[treename]}}</span>       </a>       <tree-item         class="item"         v-show="open"         v-for="(model, index) in model[treechildren]"         :key="index"         :model="model"         :treekey="treekey"         :treename="treename"         :vistreekey="vistreekey"         :vistreename="vistreename"         :treechildren="treechildren"         ref="child"         @keyname="keyname"       >       </tree-item>     </li>   </ul> </script>

可以很明显的看到这里我们使用了递归进行展示树形结构。因为树形结构你无法确定层级。所以在里面又使用了针对子节点的展示tree-item.

手写控件扩展

控件接受数据处理逻辑

//接收到数据在外面套一层 if(this.model[this.treekey]==undefined){   this.treekey=this.vistreekey; } if(this.model[this.treename]==undefined){   this.treename=this.vistreename; } if (this.model.disabled == true) {   this.model.disabled = 'disabled'; } console.log('组件注册了吗'); if ((','+this.ids+',').indexOf(','+this.model[this.treekey]+',') == -1) {   this.checkStatus = false;   this.model.checkStatus=this.checkStatus; } else {   this.checkStatus=true;   this.model.checkStatus=this.checkStatus;   this.treekeys[this.model[this.treekey]]= this.checkStatus;   this.treenames[this.model[this.treename]]= this.checkStatus;   this.opt.key=this.treekeys;   this.opt['name']=this.treenames; } if(this.ids!=''){   var idarr = this.ids;   for(var index in idarr){     this.treekeys[idarr[index]]=true;   }   if (this.names.indexOf(",") == -1&&this.names!='') {     this.treenames[this.names]=true;   }else{     var namearr = this.names.split(",");     for(var index in namearr){       this.treenames[namearr[index]]=true;     }   } }

渲染默认数据

var newOpt ={'key':{},'name':{}};   newOpt.key = Object.assign(this.opt.key, opt.key);   newOpt.name = Object.assign(this.opt.name, opt.name);   var flag=false;   for(var index in this.model[this.treechildren]){     if(newOpt.key[this.model[this.treechildren][index][this.treekey]]!=true){       flag=true;     }   }   if(!flag){     newOpt.key[this.model[this.treekey]]=true;     newOpt.name[this.model[this.treename]]=true;     this.checkStatus=true;     this.model.checkStatus=true;   }   for(var key in newOpt){     this.filterRealCheck(newOpt[key]);   }   this.opt=newOpt;   this.$emit('keyname', newOpt);

选择节点数据处理

if(selected instanceof MouseEvent){   this.checkStatus=!this.checkStatus; }else{   this.checkStatus=selected; } this.model.checkStatus=this.checkStatus; if (this.model.expected != true) {   this.treekeys[this.model[this.treekey]]= this.checkStatus;   this.treenames[this.model[this.treename]]= this.checkStatus;   this.opt.key=this.treekeys;   this.opt['name']=this.treenames; } for(var index in this.$refs.child){   this.$refs.child[index].selectedObj(this.checkStatus); } this.$emit('keyname', this.opt);

关于“基于vue如何实现tree插件”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。