el-table固定指定的行

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

<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-columnv-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>

// 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';}
}

<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>

以下是固定三行:

// 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 ``;}
}

<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>