零艺江湖 - 行到水穷处,坐看云起时 | 个人生活记录 | 零艺客 - tree
HTML<el-tree :data="date" //数据来源 show-checkbox //节点是否可被选择 node-key="moduldCode" //每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 ref="tree" check-strictly //在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false :highlight-current='true' //是否高亮当前选中节点，默认值是 false。 :check-on-click-node="true" //是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。 :accordion="true" //是否每次只打开一个同级树节点展开 :default-checked-keys="[checkedkey]" //默认勾选的节点 :default-expanded-keys="checkedkey" //默认展开的节点 :props="defaultProps" //配置选项 :default-expand-all="true" //是否默认展开所有节点 @check-change="parentModules" //节点选中状态发生变化时的回调 ></el-tree> JSdata() { return { date: [{ moduldCode: 1, moduleName: '一级 2', disabled:true, child: [{ moduldCode: 3, moduleName: '二级 2-1', disabled:true, child: [{ moduldCode: 4, moduleName: '三级 3-1-1' }, { moduldCode: 5, moduleName: '三级 3-1-2', }] }, { moduldCode: 2, moduleName: '二级 2-2', disabled:true, child: [{ moduldCode: 6, moduleName: '三级 3-2-1' }, { moduldCode: 7, moduleName: '三级 3-2-2', }] }] }], checkedkey: [], defaultProps: { children: "child", label: "moduleName", id:'moduldCode' //可要可不要 }, // 取uniqueValue值的时候，列：uniqueValue[0]否则会是一个数组 uniqueValue:''//最后拿到的唯一选择的moduldCode值,相当于id } }, methods:{ //节点选择状态发生改变时 parentModules(data,checkbox,node){ if(checkbox){ // 后端返回的node-key不是id，是moduldCode this.$refs.tree.setCheckedKeys([data.moduldCode]); this.uniqueValue = this.$refs.tree.getCheckedKeys(); }else{ this.uniqueValue = this.$refs.tree.getCheckedKeys(); if(this.uniqueValue.length == 0){ this.uniqueValue = '' } } }, modification() { this.$axios.post("/admin/module/detail", {obj}).then(res => { this.checkedkey[0] = res.date.moduleCode; //树形权限回显 }); } }