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)
})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值