vue实现的树形结构加多选框示例

  <div class="loginModuel"> </div>

 import Tree from '../../components/tree/tree'; import axios from 'axios'; export default{ data(){ return{ msg:"这是登录页面", depth:0, menus:[], actId:"", } }, components:{ Tree }, methods:{ //用ajax获取数据 getData(){ return axios.get('/static/json/data.json'); }, // 调用ajax函数 async getTree(){ var last = await this.getData(); if(last.data.code == 1){ this.menus = last.data.data; //在每一项中添加selectArr和show this.addShow(this.menus); } }, //递归函数在每一项中添加selectArr和show addShow(arr){ for(var i = 0; i  0){ this.addShow(arr[i].userList) } } }, //点击箭头使树展开收缩 selectItem(data){ if(data.userList && data.userList.length > 0){ //如果此项下有userList且length大于0，则切换展开与折叠状态 data.show = !data.show; }else{ //如果此项下没有userList或length等于0，则将选中的id赋值给actId this.actId = data.id; } }, //进行多选勾选 checkItem(data){ if(data.selectArr.length > 0){ //如果这一项的selectArr有值，说明是被勾选状态，要把selectArr清空，清空勾选 data.selectArr = []; //如果此选项清空勾选后，如果下面有userList的话，那么也同时要清空 if(data.userList && data.userList.length > 0){ this.clearChild(data.userList); } //如果此选项清空勾选后，要把所有的父元素，也全部清空勾选，因为它不勾选了，所有父元素的状态不可能还处于勾选状态，不管它勾选不勾选，我们都要清除一遍，以防万一 this.clearFather(this.menus,data); }else{//如果这一项的selectArr为[]，说明是未被勾选状态，在selectArr里加id值，添加勾选 data.selectArr.push(data.id); //如果此选项清空勾选后，如果下面有userList的话，那么也同时勾选下面所有的孩子 if(data.userList && data.userList.length > 0){ this.addChild(data.userList); } //如果此选项勾选后，要判断所有的上级元素是不是应该全部打勾 this.selectFather(this.menus,data); } }, //定义函数清空所有孩子的勾选 clearChild(arr){ for(var i = 0; i  0){ this.clearChild(arr[i].userList); } } }, //定义函数添加所有孩子的勾选 addChild(arr){ for(var i = 0; i  0){ this.addChild(arr[i].userList); } } }, //定义函数一层一层的往上寻找父元素的userList clearFather(father,data){ for(var i = 0; i  0){ this.clearFather(father[i].userList,data); } } }, //定义函数根据找到的上层父元素的userList来寻找父元素，并将他们清除勾选 clearRealFather(menus,arr){ for(var i = 0; i  0){ this.clearRealFather(menus[i].userList,arr); } } }, //定义函数一层一层的往上寻找父元素的userList selectFather(father,data){ for(var i = 0; i <father.length;i++){ if(father[i].id == data.id){ var arr = []; for(var j = 0; j  0){ arr.push(father[i]); } } //判断此数组中是不是所有的selectArr都有值，如果有值，就执行selectRealFather，将上层父元素也勾选 if(arr.length == father.length){ this.selectRealFather(this.menus,father); } }else if(father[i].userList && father[i].userList.length > 0){ this.selectFather(father[i].userList,data); } } }, //定义函数根据找到的上层父元素的userList来寻找父元素，并将他们清除勾选 selectRealFather(menus,arr){ for(var i = 0; i  0){ this.selectRealFather(menus[i].userList,arr); } } } }, mounted(){ this.getTree(); } } 

  <ul class="treeMoudel"> <li> <!-- 遍历menus，如果传过来的depth等于0，就添加topNode的class，如果不等于0，就添加noTopNode的class --><div> <!-- 判断如果含有name字段就显示name字段 --><span> <!-- 如果item有孩子且item.show为false,那么图标为折叠图标 --><i class="el-icon-caret-right"> 0 && !item.show" @click="selectItem(item)"></i><!-- 如果item有孩子且item.show为true,那么图标为展开图标 --><i class="el-icon-caret-bottom"> 0 && item.show" @click="selectItem(item)"></i><i class="selectBox"> <!-- 如果item的selectArr.length是大于0的，也就是里面有值的话就是勾选状态，否则就是不勾选状态 --><i> 0}"></i></i> {{item.name}} </span><!-- 判断如果含有username字段就显示username字段 --><span> <!-- 如果item有孩子且item.show为false,那么图标为折叠图标 --><i class="el-icon-caret-right"> 0 && !item.show" @click="selectItem(item)"></i><!-- 如果item有孩子且item.show为true,那么图标为展开图标 --><i class="el-icon-caret-bottom"> 0 && item.show" @click="selectItem(item)"></i><i class="selectBox"> <!-- 如果item的selectArr.length是大于0的，也就是里面有值的话就是勾选状态，否则就是不勾选状态 --><i> 0}"></i></i> {{item.username}} </span></div> <!-- 递归组件就是自己调用自己，这里是在自己的组件内再次调用自己，但是务必要和pages中的tree页面中使用的一模一样才可以，否则树不会生效 --> 0 && item.show" :menus="item.userList" :depth="depth+4" @selectitem="selectItem" :actid="actId" @checkitem="checkItem"></li></ul>

 export default{ name:"Tree", props:["menus","depth","actId"], data(){ return{ msg:"这是二级菜单树", } }, methods:{ // 将selectI<div style="color:transparent">本文来源gaodai.ma#com搞##代!^码@网*</div>tem方法暴露出去 selectItem(item){ this.$emit("selectItem",item); }, // 将checkItem方法暴露出去 checkItem(item){ this.$emit("checkItem",item); } }, computed:{ //通过传过来的depth计算下级目录的偏移量，这里我用的transform transform(){ return 'transform:translateX(' + this.depth*10 + 'px)'; } } } 

 .treeMoudel{ li{ .itemTree{ width: 100%; padding-left:30px; position: relative; &:hover{ background:#2B9EEE; color:#fff; } .selectBox{ display: inline-block; width: 16px; height:16px; border:1px solid #ccc; border-radius: 3px; position: relative; background: #fff; top:2px; .checkName{ position: absolute; top:-16px; left:0px; color:#333; } .checkUsername{ position: absolute; top:-12px; left:0px; color:#333; } } span{ display: inline-block; position: absolute; font-size:14px; } .topSpan{ font-size:16px; } .noTopSpan{ font-size:14px; } } .topNode{ height:55px; line-height: 55px; font-size:16px; cursor: pointer; } .active{ background:#2B9EEE; color:#fff; } .noTopNode{ height:45px; line-height:45px; &:hover{ background:#2B9EEE; cursor: pointer; color:#fff; } } } } 

 { "code":1, "data":[ { "id":"1.2", "name":"技术部", "userList":[ { "id":"788d", "username":"html", "role":"主管" }, { "id":"sda", "username":"vue", "role":"普通" } ] }, { "id":"1.3", "name":"策划部", "userList":[ { "id":"dsf", "username":"jack", "role":"主管" }, { "id":"asdf", "username":"rose", "role":"普通" } ] } ] }