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>
相关推荐
静西子1 小时前
Vue3路由
前端·javascript·vue.js
J总裁的小芒果1 小时前
vue3 全局定义动态样式
前端·javascript·vue.js
whalekv1 小时前
10月25日
前端·javascript·vue.js
xuelong-ming1 小时前
uniapp vue3 点击跳转外部网页
vue.js·uni-app
Never_Satisfied5 小时前
在JavaScript / Node.js / 抖音小游戏中,使用tt.request通信
开发语言·javascript·node.js
拉不动的猪7 小时前
函数组件和异步组件
前端·javascript·面试
淮北4947 小时前
html + css +js
开发语言·前端·javascript·css·html
麦麦大数据7 小时前
F036 vue+flask中医热性药知识图谱可视化系统vue+flask+echarts+mysql
vue.js·python·mysql·flask·可视化·中医中药
技术钱8 小时前
vue3前端解析excel文件
前端·vue.js·excel
韩立学长9 小时前
【开题答辩实录分享】以《智慧校园勤工俭学信息管理系统的设计与实现》为例进行答辩实录分享
vue.js·spring boot·微信小程序