Element-plus之获取 tree 选中的节点和未选中的节点(过滤树节点）

最新推荐文章于 2025-02-26 10:33:36 发布

kangkang-

最新推荐文章于 2025-02-26 10:33:36 发布

阅读量3.6k

点赞数 8

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_59015876/article/details/135534757

版权

文章讲述了如何在使用el-tree组件时，通过JavaScript操作获取所有已勾选的子节点和未勾选的子节点，利用`getCheckedNodes`方法获取已勾选节点，通过服务端数据和flatMap处理计算出所有子节点，再通过差集找出未勾选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在我们的需要是要获取到所有勾选的子节点和未勾选的子节点

思路:

所有勾选的子节点：el-tree中有固定的方法getCheckedNodes，然后对父节点进行一个过滤

未勾选的子节点：通过服务端拿到所有的数据，并且通过flatMap方法进行一个压缩数组，最后在和所有勾选的子节点进行一个差集，同样对父节点进行一个过滤

代码实现：

// 所有已勾选的复选框
const checkedNodes = ref([])
// 所有未勾选的复选框
const unCheckedNodes = ref([])

const showFileMap = () =>{
  if (treeRef.value) {
    // 获取勾选的节点 ID
    checkedNodes.value = treeRef.value.getCheckedNodes()
        //过滤掉父节点，并且只取的id
        .filter(item => !item.child || item.child.length === 0)
        .map(item => item.id);
        console.log("已勾选的复选框为", checkedNodes.value);


    // 通过服务端拿到的数据dataSource.value，获取所有子节点的 ID，过滤父节点的数据
    const allChildIds = dataSource.value.flatMap(parentNode =>
        parentNode.child && parentNode.child.length > 0
            ? parentNode.child.map(childNode => childNode.id)
            : []);

    // 创建一个包含勾选节点 ID 的 Set
    const checkedNodeSet = new Set(checkedNodes.value);

    // 计算未勾选的节点 ID
    unCheckedNodes.value = allChildIds.filter(id => !checkedNodeSet.has(id));
    console.log("未勾选的照片", unCheckedNodes.value);
  }
}