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++;
}
});
}
},
},
}