el-table 右侧定位（fixed）后，无法随着非fixed得cell进行高度自适应

哈哈发财了

于 2024-05-24 16:27:10 发布

阅读量375

点赞数 3

文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/lsn690607887/article/details/139177607

版权

问题描述：用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`;
        
        
       }
},

就完美的解决了，希望能帮助到你