element-ui的树组件勾选状态支持:
1:父组件勾选(全选),所有子节点全选
2:子节点不全选,父组件半选
3:子节点全不选,父组件不可选
4:树组件设置check-strictly=true,取消父子节点的勾选关联(没有半选状态)
如果要实现子组件全不选,父节点半选
<template>
<div>
<el-tree
ref="tree"
class="tree"
:data="treedata"
show-checkbox
node-key="id"
highlight-current
@check-change="checkNode"
/>
</div>
</template>
<script>
export default {
data(){
return{
treedata:[{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}]
}
},
methods:{
checkNode(a, b, c) {
var treedata = this.$refs.tree.getNode(a)
if(!anode.checked){
this.getchild(treedata.parent)
}
},
getchild(current) {
var child = this.$refs.tree.getNode(current)
if (!child.isLeaf) {
//如果是不是子节点,则设置为半选
child.indeterminate = true
child.checked = true
}
},
}
}
</script>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。