el-tree setChecked实现父子不联动

2024.1.29今天我学习了如何使用el-tree的setChecked用法,在使用el-tree的时候我们需要进行回显情况:如:

javascript 复制代码
[{id:'1',name:'张三',
children:[{id:'1-1',name:'张三四'},{id:'1-2',name:'张三五'}]},
{id:'2',name:'李四'}]

如果我们存id: '1','2',是可以把整个树都回显,但是如果在id为2的父数据里面添加子节点,如:

javascript 复制代码
[{id:'1',name:'张三',
children:[{id:'1-1',name:'张三四'},{id:'1-2',name:'张三五'}]},
{id:'2',name:'李四',
children:[{id:'2-1',name:'李四三'}]}]

这样会把'2-1'的子节点也一起回显了,这就是父子联动。

但是我们希望的是父节点变化,子节点不受影响,也就是父子不联动。

我们可以使用setChecked方法:

javascript 复制代码
let all_codes = ['1','1-1','1-2','2']
   all_codes.forEach(item=>{
      this.$refs.tree.setChecked(item,true,false)//判断子节点数据是否存在,存在则回显,不用深度遍历
})

这样就可以实现父节点变化,子节点自己改变。

相关推荐
ruanno_top1 天前
表单重置后,验证码还显示已通过:Vue 受控组件的 3 种假同步
vue.js
code_Bo1 天前
不只命令行:我把跨 Agent 会话同步做成了桌面应用
前端·javascript·后端
kyriewen1 天前
AI 能把页面写出来,为什么改个需求就开始崩?
前端·javascript·人工智能
OpsEye1 天前
同一套用例跑两个大模型接口,差异到底出在哪
javascript·ai编程
X1A0RAN2 天前
PPT 图片批量处理教程:导出全部幻灯片 · 提取全部素材
开发语言·javascript·powerpoint
量化分析码农2 天前
股票历史数据的复权参数对照:多级别返回的字段与数值差异
java·javascript·后端
ruanno_top2 天前
给标签页加 roving tabindex,整组反而键盘进不去了
vue.js
天才熊猫君2 天前
给 Vue 的 reactive 套 Proxy,为什么响应式会失灵?
前端·javascript
仨孩子的爹2 天前
CSS打印样式:字体族与行高在纸上的对照实测
vue.js
用户2763965765102 天前
放弃 JWT 后,我给 FastAPI 游戏服务端手撸了一套 token session
javascript