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坑真多,关键是悄咪咪的坑, 不注意不知道。还以为好的呢。

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

相关推荐
m0_740043731 天前
v-bind 和 v-model 的核心区别
前端·javascript·vue.js
集成显卡1 天前
AI取名大师 | 使得 uni-app 兼容 vue3 同名简写语法糖的 vite 插件
javascript·vue.js
unicrom_深圳市由你创科技1 天前
使用 Vue3 + Nest.js 构建前后端分离项目的完整指南
开发语言·javascript·状态模式
重铸码农荣光1 天前
从零实现一个「就地编辑」组件:深入理解 OOP 封装与复用的艺术
前端·javascript·前端框架
前端老宋Running1 天前
拒绝“无效焦虑”:为什么你 80% 的 useMemo 都在做负优化?
前端·javascript·react.js
品克缤1 天前
vue项目配置代理,解决跨域问题
前端·javascript·vue.js
m0_740043731 天前
Vue简介
前端·javascript·vue.js
我叫张小白。1 天前
Vue3 v-model:组件通信的语法糖
开发语言·前端·javascript·vue.js·elementui·前端框架·vue
北辰alk1 天前
Vue 的 keep-alive 生命周期钩子全解析:让你的组件“起死回生”
vue.js