el-tree组件实现禁止选中父组件操作
关键点:disabled:true。
tree.json数据
[{
"id": "1",
"name": "计算机信息管理",
"children": [{
"id": "a1",
"name": "团委",
"children":[{
"id":"b1",
"name":"Lisa"
},{
"id":"b2",
"name":"Lizzy"
}]
}, {
"id": "a2",
"name": "同学1"
}, {
"id": "a3",
"name": "同学2"
}, {
"id": "a4",
"name": "同学3"
}, {
"id": "a20",
"name": "同学4"
}, {
"id": "a5",
"name": "同学5"
}]
}, {
"id": "2",
"name": "计算机网络通信",
"children": [{
"id": "a6",
"name": "同学6"
}, {
"id": "a7",
"name": "Linda"
}]
}, {
"id": "3",
"name": "计算机大数据",
"children": [{
"id": "a8",
"name": "黄1"
}, {
"id": "a9",
"name": "吕1"
}, {
"id": "a10",
"name": "聂1"
}, {
"id": "a11",
"name": "童1"
}]
},{
"id":"4",
"name":"计算机软件开发",
"children":[
{
"id": "a12",
"name": "韩1"
}
]
},{
"id":"5",
"name":"其他",
"children":[
]
}
]
index.vue
<template>
<el-tree
:data="treeData"
show-checkbox ref="tree"
:props="defaultProps"
:highlight-current="true"
node-key="id"
empty-text="数据加载中……"
:check-strictly="true"></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [], //树型结构数据
defaultProps:{//树型图配置
children:"children",//指定子树为节点对象的某个属性值
label:"name"//指定节点标签为节点对象的某个属性值
},
}
},
mounted() {
this.init();
},
methods: {
init() {
this.$http.get("http://localhost:3000/public/tree.json").then(res => {
this.treeData = this.disabledParent(res.data);
console.log(this.treeData)
})
},
// 禁止父节点被点击
disabledParent(data){
data.forEach((node)=>{
console.log(node)
if(node.children){
node.disabled=true;
this.disabledParent(node.children)
}else{
return
}
})
return data;
},
}
};
</script>
总结:循环遍历数据，判断某一项是否有子节点，有子节点代表是父节点，给相应的父节点添加"父节点.disabled:true"属性，因为可能数据会层层嵌套，所以要使用递归进行判断，能够找到里面的所有父节点进行设置. 要加上 :check-strictly="true"属性，设置父子节点不关联.
效果图
