<el-tree
:data="date"
show-checkbox
node-key="moduldCode"
ref="tree"
check-strictly
:highlight-current=‘true‘
:check-on-click-node="true"
:accordion="true"
:default-checked-keys="[checkedkey]"
:props="defaultProps"
:default-expand-all="true"
@check-change="parentModules"
></el-tree>
data() {
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
}
},
//节点选择状态发生改变时
parentModules(data,checkbox,node){
if(checkbox){
// 后端返回的node-key不是id,是moduldCode
let array = [data.moduldCode]
this.$refs.tree.setCheckedKeys(array);
this.uniqueValue = this.$refs.tree.getCheckedKeys();
}else{
this.uniqueValue = this.$refs.tree.getCheckedKeys();
if(this.uniqueValue.length == 0){
this.uniqueValue = ‘‘
}
}
},
回显
this.$axios.post("/admin/module/detail", {obj}).then(res => { this.checkedkey[0] = res.date.moduleCode; //树形权限回显
});
}
原文:https://www.cnblogs.com/tlfe/p/11693772.html