element-ui 表格吸底固定最后一行

element-ui中表格只有固定表头以及列的方法，找遍了文档也没有固定行的方法。

于是自己些了样式。

首先需要用到css中的属性position: sticky；参考我另一篇关于css实现吸顶吸底的文章。

<el-table :data="tableData" style="width: 100%;" height="79%" stripe
            :row-class-name="rowClass"
            class="tableStyle tableRadius mt10">
                <template v-for="(item,i) in tableHeader">
                    <el-table-column  :key="i" :label="item.label" :prop="item.prop" show-overflow-tooltip></el-table-column>
                </template>
            </el-table>

设置表格高度后，给需要吸底的行设置定位，我这里固定的是合计行，设置了class。

需要注意：如果 tr 不设置 display:inline-block ，将不能实现吸底。

另外td需要设置边框，吸底后td会没有边框，整体的行会比前面未固定的行短，正好是每个td的1px边框。

rowClass({row, column, rowIndex, columnIndex}){
      if(row.startTime == '合计：') {
          return 'fixed-row'
      }
  }

.tableStyle {
  
  .el-table__body {
    // 吸底
    .fixed-row{
        display: inline-block;
        position: sticky;
        bottom: 0;
        width: 100%;
        td{
          border: 1px solid #fff;
          box-shadow: 2px -2px 3px 0px #ddd;
        }
    }
  }

效果如下：

 

tips：如果设置吸底行的样式只会对行内第一个td生效，所以如果有需要可以设置所有td的样式。我设置的阴影就是设置了td的阴影