Element-plus之获取 tree 选中的节点和未选中的节点(过滤树节点)
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
现在我们的需要是要获取到所有勾选的子节点和未勾选的子节点
思路:
所有勾选的子节点: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);
}
}
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 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)