vue中使用element组件库tree实现动态增加节点
今天写了个项目 用element中的tree组件动态的添加子节点数据
刚写是发现 tree中 :data="|" 绑定的值 如果添加数据的话 不能实现 视图的更新
我也是在网上看了许多组件 将方法整理出来
<el-tree
ref="tree"
:data="Treelist"
:props="defaultProps"
@node-click="handleNodeClick" //对应下面 自动打开事件
accordion
style="background: #292929"
node-key="id" //这个地方对应下面数据添加的id 重点
>
<span slot-scope="{ data }"> //这个地方看你的项目需求 也可以不要
<span class="pr10">{{ data.cameraName }}({{ data.totalCount }})</span>
</span>
</el-tree>
async getcamera(id) {
const res = await getDevcamera(id);
// console.log(res);
this.$nextTick(() => { //划重点了 $nextTick 不懂得上网查一下
this.$refs["tree"].updateKeyChildren(id, res.data);
//id 是对应要添加到那个节点的id
//res.data 是添加的新数据
});
},
自动展开
handleNodeClick(data, node) {
node.expanded = !node.expanded; //在组件点击事件 中使用
}
实测有效 大佬有更好方法 可以一起共享一下