el-table固定指定的行

这个整个表格数据都是后台返回的,并不是合并表格的那种,所以需要手动对表格进行样式处理!

javascript 复制代码
<el-table 
:data="tableData" 
border 
height="calc(400px - 0.52rem)" 
max-height="calc(400px - 0.52rem)" 
:row-class-name="TableRowClassName" 
:cell-style="tableRowStyleName">
     <el-table-column prop="orgName" label="单位名称"></el-table-column>
     <el-table-column prop="loadCapacityUnit" label="载量检测单位"></el-table-column>
     <el-table-column
         v-for="(item, index) in tableOption"
         :key="index"
         :prop="item.sampleCode"
         :label="item.sampleCode">
     </el-table-column>
     <el-table-column prop="totalScore" label="得分"></el-table-column>
     <el-table-column label="预览"></el-table-column>
</el-table>
javascript 复制代码
// methods里面的方法
TableRowClassName({row, rowIndex}) {
    // 最后两行固定
    if (rowIndex + 1 === this.tableData.length - 1) {
       return `tr-fixed fixed-row1`;
    } else if (rowIndex + 1 === this.tableData.length) {
       return `tr-fixed fixed-row`;
    } else {
      return ``;
    }
},
tableRowStyleName({row, rowIndex}) {
   if (rowIndex == this.tableData.length - 2 || rowIndex == this.tableData.length - 1) {
      return 'background-color: #E0E0E0 !important';
    }
}
css 复制代码
<style lang="scss" scoped>

/deep/ .el-table {
    .tr-fixed{
        display: table-row;
        position: sticky;
        bottom: 0;
        width: 100%;
    }
    .fixed-row{
        bottom: 0;
    }
    .fixed-row1{
        bottom: 1.25rem; // 这里需要根据情况,自行稍微调整
    }
}

</style>

以下是固定三行:

javascript 复制代码
// methods里面的方法
TableRowClassName({row, rowIndex}) {
     // 最后三行固定
     if (rowIndex + 1 === this.tableData.length - 2) {
         return `tr-fixed fixed-row2`;
     } else if (rowIndex + 1 === this.tableData.length - 1) {
         return `tr-fixed fixed-row1`;
     } else if (rowIndex + 1 === this.tableData.length) {
         return `tr-fixed fixed-row`;
     } else {
         return ``;
     }
}
css 复制代码
<style lang="scss" scoped>

/deep/ .el-table {
    .tr-fixed{
        display: table-row;
        position: sticky;
        bottom: 0;
        width: 100%;
    }
    .fixed-row{
        bottom: 0;
    }
    .fixed-row1{
        bottom: 1.25rem; // 这里需要根据情况,自行稍微调整
    }
    .fixed-row2{
        bottom: 2.5rem; // 这里需要根据情况,自行稍微调整
    }
}

</style>
相关推荐
漂流瓶jz5 分钟前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
大怪v39 分钟前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
ERP老兵-冷溪虎山1 小时前
Python/JS/Go/Java同步学习(第三篇)四语言“切片“对照表: 财务“小南“纸切片术切凭证到崩溃(附源码/截图/参数表/避坑指南/老板沉默术)
java·javascript·python·golang·中医编程·四语言同步学习·职场生存指南
webYin1 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
gnip1 小时前
结合Worker通知应用更新
前端·javascript
Gazer_S2 小时前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js
_Rookie._2 小时前
vue3 使用css变量
前端·javascript·html
良木林4 小时前
JS函数进阶
开发语言·前端·javascript
小薛博客4 小时前
23、Jenkins容器化部署Vue应用
运维·vue.js·jenkins
HelloRevit5 小时前
让B站视频4倍速度播放
前端·javascript·音视频