问题的形成原因:
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
})