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)//判断子节点数据是否存在,存在则回显,不用深度遍历
})

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

相关推荐
極光未晚28 分钟前
JavaScript BOM 对象:浏览器的隐形控制塔
前端·javascript·源码
天涯学馆29 分钟前
网站秒变 App!手把手教你搞定 PWA
前端·javascript·面试
用户92724725021934 分钟前
PHP + CSS + JS 数据采集与展示系统
javascript
小样还想跑1 小时前
axios无感刷新token
前端·javascript·vue.js
字节跳跃者1 小时前
为什么Java已经不推荐使用Stack了?
javascript·后端
字节跳跃者1 小时前
深入剖析HashMap:理解Hash、底层实现与扩容机制
javascript·后端
用户3802258598242 小时前
vue3源码解析:响应式机制
前端·vue.js
时间会给答案scidag2 小时前
报错 400 和405解决方案
vue.js·spring boot
Web小助手2 小时前
js高级程序设计(日期)
javascript
白杨木影子被拉长2 小时前
多状态映射不同样式(scss语法)
vue.js·uni-app