关于el-table组件fixed属性固定列行错位问题

648 阅读1分钟

最近遇到一个el-table组件中,当行高度改变时,fixed固定列的行不随着高度变化而变化。 经历了修改css,或doLayout()都未能解决问题。记录一下解决方法,仅供参考。

image.png

解决方式

//刷新表格布局
refreshLayout(){
  this.$nextTick(() => {
    const table = this.$refs.tableView;
    if (table) {
      table.doLayout(); // 重新计算布局
      const bodyRows = table.$el.querySelectorAll('.el-table__body-wrapper tr');
      const fixedRows = table.$el.querySelectorAll('.el-table__fixed-body-wrapper tr');
      bodyRows.forEach((row, index) => {
        if (fixedRows[index]) {
          fixedRows[index].style.height = `${row.offsetHeight}px`;
        }
      });
    }
  });
},