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

思路:

所有勾选的子节点: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);
  }
}

GitHub 加速计划 / eleme / element
15
3
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐