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

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

相关推荐
啾咪orJIUMI8 小时前
Vue 3 + 高德地图封装实战:点位、区域、Loca 流光与 Vue 信息窗体
前端·vue.js
FRing038 小时前
vue2干货总结8(路由模块封装、router-link、声明式导航、路由重定向、编程式导航)
开发语言·前端·vue.js·vue2
无懈可击9 小时前
Vue 可视化AI表单设计器 FcDesigner v3.6 版本发布,支持导出 SQL功能!
vue.js·开源·ai编程
徐小夕10 小时前
JitArchives,一款基于JitWord协同AI文档打造的企业级电子档案系统
前端·vue.js·github
vipxieliang10 小时前
JavaScript 迭代器与生成器:控制异步与惰性求值
前端·javascript
Hilaku10 小时前
Event Loop 这篇你看完就不用再看别的了!
前端·javascript·程序员
晓得迷路了11 小时前
栗子前端技术周刊第 153 期 - Vitest 5.1、Remix v3.2、Node.js 27 Alpha...
前端·javascript·vite
系统集成-鹰翔12 小时前
ERP单据已作废为什么商品仍不能删除,引用检查与软删除怎么查
javascript·经验分享·后端
头发还在的女程序员12 小时前
基于 Spring Boot + Vue 3 + uni-app 的灵活用工系统:四端架构与业务流程设计
vue.js·spring boot·uni-app·灵活用工·灵工系统
Penge66612 小时前
《Go 后端开发者学 React:Hook》
javascript