el-tree lazy 使用 default-checked-keys 确定check 子项仅有连续n项为check时,根级会变为check,导致其子项全部变为check

问题定位

el-tree 在使用 lazy 模式时,当提供的 default-checked-keys 数组 开始仅包含 从第一个子节点开始 连续的(>= 2)check key 时,
就会造成 父级 设置成 check , 最终导致 所有子级都被选中

default-checked-keys 数组的值是通过 懒加载获得的

问题原因

可能跟 el-tree 的底层渲染 方式有关

解决方法

尝试在首部添加一个不可见的节点,
且不说行不行,父级会出现半选

百度的方案
checkStrictly太复杂了

利用js运行机制并不能解决
借鉴他的思路,对checked进行重新赋值,不过代码要加在子层

// 在出问题子级请求下添加,此时 node 为父级节点
this.$refs.tree.getNode(node.key).data.disabled = false
setTimeout(() => { // 保证在 return 之后执行
  node.childNodes.forEach(item => { // 重置了被覆盖的check
    item.checked = this.defaultChecked.includes(item.data.id) // id 为你设置的node-key
  }) // 会闪一下
  // 更新父级半选状态
  this.$refs.tree.setChecked(node.childNodes[0].key, !node.childNodes[0].checked)
  this.$refs.tree.setChecked(node.childNodes[0].key, !node.childNodes[0].checked)
})

通过这个方案又启发了我,或许不使用 default-checked-keys 就可以解决这个问题

// 在原本 push default-checked-keys数组的地方 采用直接赋值check的方式
setTimeout(() => {
  this.$refs.tree.setChecked(node.childNodes[index].key, true)
})
posted @   海胆Sur  阅读(73)  评论(0编辑  收藏  举报  
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· winform 绘制太阳,地球,月球 运作规律
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示