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

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

思路:

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