Element UI 踩坑——tree组件setCheckedKeys无法完全清空选中项BUG

506 阅读1分钟

最近在使用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的话做些微调也可使用。 有什么不足或者更好的解决办法请大家多多指点,我也好及时修正。

文章比较稚嫩,还请大家多多指导。