el-tree动态添加子节点的问题

如果我们需要动态往el-tree里面某一个节点添加子节点,追加或删除,我跟你讲,一定要显式地调用el-tree的方法,不然的话,后面调用setChecked这种方法看不到效果的。

比如el-tree绑定的data如下:

{id:"1",label:"父1",children:\[\]}

el-tree指定node-key='id', 然后在一个mounted之后的事件(比如某个按钮的点击事件)中往data的第一个元素的children里面添加一个node,新data如下:

{id:"1",label:"父1",children:\[id:"1-2",label:"子",children:\[\]\]}

这时候,如果你没有显示地调用el-tree的append方法的话,页面当中的el-tree仍然会正常地显示新加元素,于是我还以为好了呢。

但是我要是想添加新元素的同时给他设置checked状态,调用el-tree的setChecked方法,会发现新加元素的checked的设置死活不起效果。

通过调试源码,才发现,必须得显示调用append方法:

吐血啊,一定要记住啊,el-tree坑真多,关键是悄咪咪的坑, 不注意不知道。还以为好的呢。

在此记录,方便日后查阅。

相关推荐
前端小巷子13 小时前
JS打造“九宫格抽奖”
前端·javascript·面试
老华带你飞13 小时前
畅阅读小程序|畅阅读系统|基于java的畅阅读系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序·毕设·畅阅读系统小程序
Ares-Wang14 小时前
Vue3》》eslint Prettier husky
开发语言·javascript·ecmascript
EveryPossible14 小时前
静态箭头连线
开发语言·javascript·ecmascript
伍哥的传说14 小时前
QRCode React 完全指南:现代化二维码生成解决方案
前端·javascript·react.js·qrcode.react·react二维码生成·qrcodesvg·qrcodecanvas
listhi52014 小时前
Map对象在JavaScript循环中的使用
开发语言·前端·javascript
小熊学Java14 小时前
基于 Spring Boot+Vue 的高校竞赛管理平台
vue.js·spring boot·后端
百思可瑞教育18 小时前
uni-app 根据用户不同身份显示不同的tabBar
vue.js·uni-app·北京百思可瑞教育·北京百思教育
雾恋1 天前
最近一年的感悟
前端·javascript·程序员
华仔啊1 天前
Vue3 的 ref 和 reactive 到底用哪个?90% 的开发者都选错了
javascript·vue.js