共计 848 个字符,预计需要花费 3 分钟才能阅读完成。
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>
正文完