问题描述:用el-table的时候如果表头过多,通常会采用将操作栏进行定位(fixed),更方便进行操作,但是如果存在将非定位的元素高度撑高后,右侧的fixed操作栏的高度没有跟着变化
解决办法:
1、通过el-table 的row-class-name 给row 添加index
<el-table :data="list" :row-class-name="tableRowClassName"></el-table>
tableRowClassName ({ row, rowIndex }) {
row.index = rowIndex
}
2、通过el-table的 row-click方法获取index
<el-table
:data="list"
:row-class-name="tableRowClassName"
@row-click="handleCurrentChange"
ref="multipleTable">
</el-table>
handleCurrentChange(row, column, event) {
this.$nextTick(() => {
var goodsTableForm = this.$refs.multipleTable;
//row.index : row 的index
//goodsTableForm: table
//tagListDiv: 非fixed得cell里要撑开和收起的div
this.resetFixedRowHeight(row.index, goodsTableForm, 'tagListDiv')
})
},
3、获取el-table__fixed-body-wrapper下的tr,获取el-table__body-wrapper的tr,将当前点击的tr的高度赋值给fixed 的tr
<el-table
:data="list"
:row-class-name="tableRowClassName"
@row-click="handleCurrentChange"
ref="multipleTable">
</el-table>
handleCurrentChange(row, column, event) {
this.$nextTick(() => {
var goodsTableForm = this.$refs.multipleTable;
//row.index : row 的index
//goodsTableForm: table
//tagListDiv: 非fixed得cell里要撑开和收起的div
this.resetFixedRowHeight(row.index, goodsTableForm, 'tagListDiv')
})
},
resetFixedRowHeight(index, currentTable, contentBoxClassName) {
const element = currentTable.$el;
element.querySelector('.el-table__fixed')
const fixedTableAllTrList =
element.querySelectorAll('.el-table__fixed-body-wrapper .el-table__body tbody > .el-table__row');
const originTableAllTrList =
element.querySelectorAll('.el-table__body-wrapper .el-table__body tbody > .el-table__row');
const fixedTableTrList = [...fixedTableAllTrList].filter(originTr => {
return originTr.className.indexOf('el-table__row--level') === -1
});
const originTableTrList =
[...originTableAllTrList].filter(originTr => originTr.className.indexOf('el-table__row--level') === -1);
if (originTableTrList.length && originTableTrList[index]) {
const originContentDiv =
originTableTrList[index].querySelector(`.${contentBoxClassName}`);
const originTableTrHeight = originContentDiv.getBoundingClientRect();
const fixedContentDiv =
fixedTableTrList[index].querySelector(`.${contentBoxClassName}`);
fixedContentDiv.style.height = `${originTableTrHeight.height}px`;
}
},
就完美的解决了,希望能帮助到你