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>
相关推荐
RadiumAg43 分钟前
记一道有趣的面试题
前端·javascript
yangzhi_emo1 小时前
ES6笔记2
开发语言·前端·javascript
yanlele1 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
烛阴2 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
Hexene...3 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情3 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz3 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
华子w9089258593 小时前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端
ohMyGod_1235 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜055 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js