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>
相关推荐
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊4 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
幽络源小助理4 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
Liudef065 小时前
2048小游戏实现
javascript·css·css3
鱼樱前端6 小时前
今天介绍下最新更新的Vite7
前端·vue.js
独立开阀者_FwtCoder7 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句7 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom8 小时前
JavaScript reduce()函数详解
javascript
小飞悟8 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子8 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript