最近在使用Element UI tree组件的时候,无意间发现官方提供的清空选中项的方法无法完全清空的问题。 在网上搜了下然后结合自己的想法做个记录,解决方案如下:
// html结构
<el-tree ref="Tree" :data="data" show-checkbox/>
// js
// data数据
const data=reactive([
{
id: 1,
label: "Level one 1",
children: [
{
id: 4,
label: "Level two 1-1",
children: [
{
id: 9,
label: "Level three 1-1-1",
},
{
id: 10,
label: "Level three 1-1-2",
},
],
},
],
},
]);
// 清空树
const clearTreeModule = () => {
const node = Tree.value.getNode(
data[0].id
).parent;
const clearTree = (node) => {
if (node.childNodes && node.childNodes.length > 0) {
node.childNodes.map((val) => {
val.checked = false;
clearTree(val);
});
}
};
clearTree(node);
};
上面是vue3的方式写的,vue2的话做些微调也可使用。 有什么不足或者更好的解决办法请大家多多指点,我也好及时修正。
文章比较稚嫩,还请大家多多指导。