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)
})
内容会不断更新,欢迎批评指正。
分类:
问题解决
标签:
javascript
, node.js
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· winform 绘制太阳,地球,月球 运作规律
· 上周热点回顾(3.3-3.9)