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

空谷幽兰~~

于 2023-02-09 15:17:05 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： elementui table 文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/weixin_50070859/article/details/128953582

elementui table 专栏收录该内容

2 篇文章

订阅专栏

文章介绍了在Vue项目中，如何利用CSS的position:sticky属性实现表格的吸顶效果，特别是针对合计行的固定。通过设置el-table的height和row-class-name属性，以及为合计行添加特殊的class（如fixedRow），可以达到当表格滚动时，合计行始终保持在屏幕底部的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

吸顶操作用到属性：position: sticky

  <el-table :data="dataList"
                  ref="table"
                  :row-class-name="rowFixed"
                  :header-cell-class-name="rowClass"
                  :height="upOrDown ? 'calc(100vh - 260px)': 'calc(100vh - 140px)'">
                  <el-table-column label="网点" align="center" show-overflow-tooltip prop="branch_name">
                  </el-table-column>
 </el-table>

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

 rowFixed ({row, rowIndex, columnIndex}) {
      if (row.branch_name === '合计') {
        return 'fixedRow'
      }
      return ''
    },

注：这里的 ‘display: inline-block;’ 可有可无，根据项目自行调整

.el-table >>> .fixedRow{
        /* display: inline-block; */
        position: sticky;
         background: #f5f7fa !important;
        bottom: 0;
        width: 100%;
 }