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

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

实现中遇到的问题

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

解决方法

需要在获取父层表格数据时，添加一个子层表格数据的属性值（事先声明），然后在expand-change事件中给该属性赋值，这样el-table就能识别出数据变化并实时更新视图.在给table绑定的数组变量赋值之前,就给子层把需要更新的变量设置好(例子中的loadDetails)

if (res.status == 200) {
    const arr = res.data
    arr.forEach(ele => {
        ele.objCountList = []
        ele.loadDetails = false
    })
    this.tableData = arr
}
if (res.status == 200) {
    this.tableData.forEach((ele, idx) => {
        if (ele.id == row.id) {
            row.objCountList = res.data
            this.$set(row, 'loadDetails', true)
        }
    })
}