el-tree数据回显只选子节点父节点也会被选中解决办法
可以在 el-tree 组件的 data 属性中给每个节点添加一个 checked 属性,表示该节点是否被选中。当父节点被选中时,可以通过递归遍历子节点来将子节点的 checked 属性也设置为 true。当子节点被取消选中时,需要判断其兄弟节点是否都未选中,如果是,则将父节点的 checked 属性也设置为 false。
示例代码如下:
<template>
<el-tree :data="treeData" @check-change="handleCheckChange"></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
label: '父节点1',
children: [
{
label: '子节点1-1',
checked: false
},
{
label: '子节点1-2',
checked: false
}
],
checked: false
},
{
label: '父节点2',
children: [
{
label: '子节点2-1',
checked: false
},
{
label: '子节点2-2',
checked: false
}
],
checked: false
}
]
}
},
methods: {
handleCheckChange(data, checked) {
// 递归设置子节点的 checked 属性
data.children && data.children.forEach(child => {
child.checked = checked
this.handleCheckChange(child, checked)
})
// 设置父节点的 checked 属性
if (data.parent) {
const siblings = data.parent.children
const allChecked = siblings.every(item => item.checked)
data.parent.checked = allChecked
this.handleCheckChange(data.parent, allChecked)
}
}
}
}
</script>
原文地址: https://www.cveoy.top/t/topic/bEMV 著作权归作者所有。请勿转载和采集!