Element tree树形结构 动态添加子节点数据并自动展开

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; //在组件点击事件 中使用
      
      }

实测有效 大佬有更好方法 可以一起共享一下