解决el-table异步加载任务子项数据时页面卡顿的问题

1.解决的问题

 当表格嵌套表格查看页面时，如果同时将任务数据和子项数据加载出来就会造成页面明显卡顿，所以要改成当点击展开按钮时才加载子项数据。

2.功能说明

  外部<el-table>使用@expand-change方法，添加<el-table-column type="expand">,<el-table-column type="expand">中的<el-table>必须要加上key值，这能使子项数据加载完及时渲染到页面，但并不刷新其他无变化的dom。

事件名	说明	参数
expand-change	当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第一个参数为 expandedRows；树形表格时第二参数为 expanded）	row, (expandedRows / expanded)

key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

3.模块详细设计

（1）template 模块

<el-table
  ref="myTable"
  :data="tableData"
  v-loading="loading"
  :element-loading-text="$store.state.languageState.loading"
  element-loading-spinner="el-icon-loading"
  :header-cell-style="{backgroundColor: '#70AFCE',textAlign: 'center',}"
  :cell-style="{ textAlign: 'center' }"
  :border="false"
  size="mini"
  @expand-change="handleChangeExpand"
>
    <el-table-column type="expand">
        <template slot-scope="scoped">
            <el-table
              :data="scoped.row.items"
              :key="tableKey"
              ref="mySubTable"
              style="margin-left: 55px; width: 100%"
              :header-cell-style="{backgroundColor: '#A4DFEF',textAlign: 'center',}"
              :cell-style="{textAlign: 'center',padding: '0',backgroundColor: '#ecf5ff',}"
              :border="false"
              size="mini"
              >
            </el-table>
        </template>
    </el-table-column>
</el-table>

2. js模块

export default{ 
    data(){
        return{
            tableData:[],
            tableKey:0,
        }
    },
    methhods:{
        //获取执行子项
        handleChangeExpand(row, expandedRows) {
            //异步加载expand中的数据
            if (!row.loadDetail && expandedRows.includes(row)){
               //expandedRows.includes(row)表示只在展开时请求，收起不请求
                row.loadDetail = true; // 设置加载状态防止重复请求
                this.$axios.post(`/api/wms/execute/getexecutes`, {tasksDetailsId: row.id,})
                .then((res) => {
                    if (res.data.code === 0) {
                        let data = res.data.data.data;
                        row.items = data;
                        this.tableKey++;
                    }
                });
            }
        },
    },
}