其实就是让后端返回数据时多返回一个字段type:
将没有子节点的那层type设置为0,叶子节点type为3,第一层type为1,第二层type为2;然后判断type为1或2时,给节点添加isChange=false,type为0或3时,isChange为true;然后再调用一个方法,循环树形数据,判断isChange为false时设置disabled为true;最后就是写样式了,带有is-disabled的设置display为none。
1.先把树写出来呗
<el-tree ref="tree" class="sourceTree" :data="treesData" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false"></el-tree>
2.调用接口获取树形结构所需数据
因为只有3层数据 所以遍历了3次
getLinkModules(){
......
this.treesData = JSON.parse(JSON.stringify(res.data))
this.treesData.forEach(item =>{
if(item.type == '1' || item.type == '2'){
item.isChange = false
}else{
item.isChange = true
}
if(item.children){
item.children.forEach(val =>{
if(val.type == '1' || val.type == '2'){
val.isChange = false
}else{
val.isChange = true
}
if(val.children){
item.children.forEach(newItem =>{
if(newItem.type == '1' || newItem.type == '2'){
newItem.isChange = false
}else{
newItem.isChange = true
}
})
}
})
}
})
// 调用方法为节点添加disabled属性
this.setDisabled(this.treesData)
}
3.写方法为所有isChange为false的节点添加disabled属性
setDisabled(treeData){
if(treeData){
treeData.forEach(item =>{
if(!item.isChange){
item.disabled = true
this.setDisabled(item.children)
}
})
}
}
4.写样式 把带有is-disabled的el-checkbox的display设置为none
// 为叶子节点添加dispaly:inline-block;
.sourceTree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner{
dispaly:inline-block;
}
// 为不带is-leaf的节点添加display:none;
.sourceTreee .el-tree-node .el-checkbox .el-checkbox__inner{
dispaly:none;
}
// 为带有is-disabled的节点添加display:none;
.sourceTreee .el-tree-node .el-checkbox.is-disabled .el-checkbox__inner{
dispaly:none;
}
这样就可以啦~