element-ui 表格吸底固定最后一行-Toy模板网

这篇具有很好参考价值的文章主要介绍了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;
        }
    }
  }

效果如下：

el-table 固定行,element-ui,vue,web前端,css,elementui