在工作中,我们可能会遇到这种需求,点击表格的每一行,可以在该行下面展示一个新的表格,我们暂且称之为子表格或嵌套表格,因为字段较多,主表格和子表格都会出现横向滚动条,并且,右侧操作栏都固定,如果我们直接使用el-table的type="expand",不做特殊处理,则在滚动主表格的时候,子表格或跟着滚动,而且,子表格的fixed没有生效。
使用position 的 sticky 定位来实现,并且,给子表格设定一个宽度,最好使跟主表格的可视宽度一致,效果上更好一些。
直接上代码:
一、HTML:
主表格mainTable,使用 el-table 的 type="extand",实现展开不同行,展示不同的子表格数据,
<el-table
ref="mainTable"
v-loading="loading"
:data="tableList"
show-overflow-tooltip
:class="'main-table'"
@expand-change="expandChange"
>
<el-table-column label=" " type="expand" fixed="left" width="50">
<template #default="scope">
<div :class="`nested-table expand-wrapper-width-${scope.row.courseId}`">
<el-table
v-loading="subLoading[scope.row.courseId]"
:data="subTableData[scope.row.courseId]"
:class="`sub-table td_${scope.row.courseId}`"
:header-row-class-name="'supplement-header'"
border
show-overflow-tooltip
>
<el-table-column label="课程名称" align="center" fixed="left" prop="title" min-width="170" />
<el-table-column label="课程编号" align="center" fixed="left" prop="courseNo" min-width="150" />
<el-table-column label="复核时间" align="center" prop="reviewTime" min-width="180" />
<el-table-column label="复核人" align="center" prop="reviewBy" width="160" />
<el-table-column
label="操作"
width="240"
align="center"
fixed="right"
class-name="small-padding fixed-width"
>
</el-table-colimn>
</el-table>
</div>
</template>
</el-table-column>
<el-table-column label="表头1" fixed="left" width="150" />
<el-table-column label="表头2" width="150" />
<el-table-column label="表头3" width="150" />
......
<el-table-column label="表头n1" fixed="right" width="150" />
<el-table-column label="表头n2" fixed="right" width="150" />
</el-table>
二、TS:
实现的是异步加载数据,点击展开的时候调接口,并且获取主表格的宽度付给子表格的外层div:使子表格正好充满主表格,
const mainTable = ref();
const subTableData = ref({});
const subLoading = ref({});
//异步获取数据,当点击展开的时候,请求接口获取数据
const expandChange = async row => {
await nextTick();
const expandDiv = document.getElementsByClassName(`expand-wrapper-width-${row.courseId}`)[0];
if (expandDiv ) {
subLoading.value[row.courseId] = true;
querySupplementList(row.courseId)
.then(res => {
subTableData.value[row.courseId] = res?.data;
})
.finally(() => {
subLoading.value[row.courseId] = false;
const w = document.getElementsByClassName("main-table")[0].offsetWidth + "px";
expandDiv.setAttribute("style", `width: ${w}`);
unref(mainTable).doLayout();
});
}
};
三、css:
为子表格的外层包裹div设置定位 sticky,left:0, 表示横向滚动主表格的时候,嵌套的子表格固定在左侧,不随着滚动。注意设置z-index,确保嵌套的子表格在主表格之上。
<style scoped lang="scss">
/* 解决展开时,滚动原表格,子表格展示问题 */
.main-table {
.nested-table {
position: sticky;
left: 0;
z-index: 3; /* 确保嵌套表格在主表格之上 */
}
}
</style>