el-table展开行 +懒加载功能实现表格嵌套

背景需求

如下图,想要在表格展开行中再嵌套一个表格,外层表格数据和内层表数据由两个接口提供,故需要用类似懒加载的功能实现。

为什么说类似懒加载,是因为我发现el-table组件自带的树形数据与懒加载并不能满足子表格组件展示字段与父表格组件展示字段不一致的需求,所以我选择采用展开行 + expand-change事件来实现。

实现中遇到的问题

通过展开行+ expand-change实现时,遇到一个很大的问题,就是el-table组件在更新数据内部某个属性值时,并不能实时刷新dom视图,这样会导致每次在expand-change事件中获取到内层表格数据后，给父层数据中添加属性时视图并未刷新。

解决方法

需要在获取父层表格数据时，添加一个子层表格数据的属性值（事先声明），然后在expand-change事件中给该属性赋值，这样el-table就能识别出数据变化并实时更新视图。

实现代码如下

注意: row-key属性是必须的,否则会导致