elementui 表格的合计行置于左右滚动条的上方

1、html代码

<el-table

      ref="somTable"

      :data="tableData"

      border

      height="300"

      :summary-method="getSummaries"

      show-summary

      style="width: 100%; margin-top: 20px"

    >

      <el-table-column prop="id" label="ID" width="180"> </el-table-column>

      <el-table-column prop="name" label="姓名"> </el-table-column>

      <el-table-column prop="amount1" label="数值 1（元）"> </el-table-column>

      <el-table-column prop="amount2" label="数值 2（元）"> </el-table-column>

      <el-table-column prop="amount3" label="数值 3（元）"> </el-table-column>

      <el-table-column prop="amount1" label="数值 1（元）"> </el-table-column>

      <el-table-column prop="amount2" label="数值 2（元）"> </el-table-column>

      <el-table-column prop="amount3" label="数值 3（元）"> </el-table-column>

      <el-table-column prop="amount1" label="数值 1（元）"> </el-table-column>

      <el-table-column prop="amount2" label="数值 2（元）"> </el-table-column>

      <el-table-column prop="amount3" label="数值 3（元）"> </el-table-column>

      <el-table-column prop="amount1" label="数值 1（元）"> </el-table-column>

      <el-table-column prop="amount2" label="数值 2（元）"> </el-table-column>

      <el-table-column prop="amount3" label="数值 3（元）"> </el-table-column>

      <el-table-column prop="amount1" label="数值 1（元）"> </el-table-column>

      <el-table-column prop="amount2" label="数值 2（元）"> </el-table-column>

      <el-table-column prop="amount3" label="数值 3（元）"> </el-table-column>

      <el-table-column prop="amount1" label="数值 1（元）"> </el-table-column>

      <el-table-column prop="amount2" label="数值 2（元）"> </el-table-column>

      <el-table-column prop="amount3" label="数值 4（元）"> </el-table-column>

    </el-table>

2、js代码

mounted() {

    const a = this.$refs.somTable.$refs.footerWrapper;

    a.addEventListener("scroll", () => {

      const left = a.scrollLeft;

      this.$refs.somTable.$refs.bodyWrapper.scrollLeft = left;

    });

  },

3、样式

.el-table--scrollable-x .el-table__body-wrapper {

  overflow-x: hidden !important;

  z-index: 2 !important;

}

.el-table__footer-wrapper {

  overflow-x: auto;

  border-top: 1px solid #f4f4f4;

}

4、效果展示