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>
相关推荐
lecepin34 分钟前
AI Coding 资讯 2025-09-17
前端·javascript·面试
猩兵哥哥1 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
江城开朗的豌豆2 小时前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
江城开朗的豌豆2 小时前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
Asort2 小时前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
EMT3 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
艾小码3 小时前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
前端康师傅3 小时前
JavaScript 作用域常见问题及解决方案
前端·javascript
我是日安3 小时前
从零到一打造 Vue3 响应式系统 Day 9 - Effect:调度器实现与应用
前端·vue.js
Mintopia3 小时前
🚀 Next.js 全栈 E2E 测试:Playwright vs Cypress
前端·javascript·next.js