el-table type=“expand“ @expand-change=“ “ 事件获取数据 dom渲染不显示

本文链接：https://blog.youkuaiyun.com/guoshujie1/article/details/102663115

问题的形成原因：

1.在el-table中添加 type=“expand” 二级列表
2.二级列表数据是由 @expand-change=" " 事件请求api获取
3.把获取的数据动态添加到一级列表的数据中
4.导致数据结构深层次嵌套 vue数据没有及时回显

详解

我们知道在vue中，数据的绑定都不用我们操心，例如在data中有一个msg的变量，你修改它，那么在页面上，msg的内容就会自动发生变化。但是如果对于一个复杂的对象，例如一个对象数组，你直接去给数组上某一个元素增加属性，或者直接把数组的length变成0，vue就无法知道发生了改变。

// 一级列表  渲染数据是数组   array
// 二级列表  渲染数据是根据一级数据的当前列表的id请求api获取的   数据结构也是数组   arrayChildren
// 将获取到的arrayChildren 根据id判断 动态添加到  相应的一级列表中
// 例如一个对象数组，你直接去给数组上某一个元素增加属性，或者直接把数组的length变成0，vue就无法知道发生了改变。
。。。
// v-if= “update ” 配合 this.$nextTick(() => {} 强制刷新dom结构 <el-table  v-if= 'update '> </el-table  > 二级列表

this.array.forEach((item, key) => {
     if (item.id == row.id) {     
       this.array[key].arrayChildren1 = arrayChildren1
       this.array[key].arrayChildren2 = arrayChildren2
      }
   })
 this.update = false
 this.$nextTick(() => {
   this.update = true
})