vue3+ts+el-table，使用expand实现嵌套表格，如何实现子表格不随主表格滚动？

在工作中，我们可能会遇到这种需求，点击表格的每一行，可以在该行下面展示一个新的表格，我们暂且称之为子表格或嵌套表格，因为字段较多，主表格和子表格都会出现横向滚动条，并且，右侧操作栏都固定，如果我们直接使用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>

四、展示视频