element el-tree 数据返显 全选子节点解决方案

element el-tree 数据返显 全选子节点解决方案
element el tree 默认check-strictly 为false 也就是叶子节点和父节点是关联的状态 所以返回的数据只要包含父节点 子节点全部选中
如果强制将check-strictly 设置为true 那我们在选在父节点的时候子节点的关联选中效果也就消失了
这种方法 不太好 所以:
逻辑:
1.获取需要返显的节点id
2.遍历 获取对应id的node
3.通过判断node isLeaf是否为子节点 true则设置选中效果
注意
写的过程中,this. r e f s . t r e e N a m e . g e t N

Element Plus 的 `el-tree` 组件提供了一个高度可定制的数据驱动树形控件,其中包含丰富的功能,包括全选、清空和反选操作。以下是关于这些功能的基本解释: 1. **全选** (All Select): 可以通过点击顶部节点的复选框,或者设置相应的事件处理器,实现树中所有子节点的选中状态同步更新。这通常需要配合 `check` 或 `check-strictly` 属性以及 `default-checked-keys` 或 `default-checked` 数据属性来配置。 2. **清空选择** (Clear Selection): 当用户希望清除当前的所有选中项时,可以触发 `clearSelection` 方法或者监听 `@selection-change` 事件,然后手动将 `checkedKeys` 或者全局的 `selectedKeys` 设置为空数组。 3. **反选** (Invert Selection): 如果希望所有非选中的项变成选中,而选中的项变为未选中,同样可以使用 `clearSelection` 然后添加所有其他非选中的节点到 `checkedKeys` 中,或者在事件处理器中对当前选中的键进行取反操作。 要实现上述操作,你需要在组件的实例上绑定这些方法,并根据实际需求调用它们。例如: ```html <template> <el-tree :data="treeData" @selection-change="handleSelectionChange"> <!-- ... --> </el-tree> </template> <script> export default { methods: { handleSelectionChange(selectedKeys) { // 全选、清空、反选处理 if (this.toggleAll) { selectedKeys.length ? this.clearSelection() : this.selectAll() } else { // 反选逻辑 const allKeys = this.treeData.map(item => item.key); selectedKeys.length && this.checkKey(notifyKeys(allKeys, selectedKeys)) } }, selectAll() { // 设置所有节点选中 this.$refs.tree.setCheckedKeys([...allKeys]) }, clearSelection() { this.$refs.tree.setCheckedKeys([]) }, checkKey(keys) { keys.forEach(key => this.$refs.tree.setChecked(key, true)) } } } </script> ```
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值