el-table固定底部合计行

el-table想要设置底部合计行方法有很多，比如它自带的有一个show-summary属性，可以自动计算合计行并固定在底部，这确实很省事，但是这个属性并不能解决特定需求的问题，而且当表单数据量大的时候，每次请求表单都要计算合计行，也会影响性能，因此在大部分开发过程中，合计行都是通过后端返回的，我们需要做的是，如何将合计行固定在底部即可！

// 在el-table标签这里使用row-class-name这个属性！
<el-table
    v-loading="loading"
    height="100%"
    border
    :data="tableData"
    :row-class-name="tableRowClassName"
>



// methods里写下这个方法tableRowClassName
tableRowClassName(row_params) {
    let { row } = row_params
    if (row.name == '总计') {
        // 找到总计那一行，然后单独给这行加类名！
        return `tr-fixed fixed-row`
    } else {
        return ``
    }
}



// style部分
::v-deep .el-table {
  .tr-fixed {
    display: table-row;
    position: sticky;
    bottom: 0;
    width: 100%;
    td {
      border-top: 1px solid #f3f5fa;
      background: #fff;
    }
  }
  .fixed-row {
    bottom: 0;
  }
}

其原理很简单，就是通过控制合计行的css，让它固定在底部，而且还可以随意设置它的style，这里还考虑到了有固定列的情况。同理你可以随意控制，不仅仅是要求在底部，也可以任意位置，不仅仅要求是合计行，也可以控制任意行。