预约登记小程序_基于vue手写tree插件的那点事儿

摘要: 根据vue笔写tree软件的那点事情 本文关键给大伙儿详细介绍了根据vue笔写tree软件的那点事情,原文中根据实例编码详细介绍的十分详尽,对大伙儿学习培训或是应用vue具备一定的参...

基于vue手写tree插件的那点事儿       这篇文章主要给大家介绍了基于vue手写tree插件的那点事儿,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

前言

Tree树形控件在前端开发中必不可少,对于数据的展示现在网站大都采取树形展示。因为大数据全部展示出来对于用户来说是不友好的。今天我们自己手写一个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"
 treekey="deptId"
 treename="deptName"
 treechildren="children"
 :model="deptData"
 :ids="sysUserRole.deptIds"
 :names="sysUserRole.deptNames"
 @keyname="selectedUserObj"
 /zxhtree 

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

ponent.ponent('zxhtree', {});
继续在zxhtree里看除绑定的节点是template: '#tree-template'。
中写好的

 script type="text/x-template" id="tree-template" 
 div 
 tree-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" 
 li @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" : treenode_switch="" /span 
 a : treenode_a="" _blank" style="" :title="model[treename]" 
 span title="" treenode_ico="" style="" /span 
 span @dblclick="toggle" {{model[treename]}} /span 
 tree-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.


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);

手写控件总结

因为笔者是侧重后端,所以前端知识不是很好,这个组件写的也是很乱。这个组件是之前临时写的。里面没有进行系统的梳理,上述的逻辑也是很乱。读者需要的可以选择下列加入战队(#addMe)联系我

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对凡科的支持。




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503