使用element-ui框架积累(三)
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"属性,设置父子节点不关联.
效果图