el-table使用expand展开倒数第二行时，最下面一行会错乱，我把第一列的数据进行了合并，求问大家怎么解决呀？

Question

el-table使用expand展开行时，最下面一行会错乱，我把第一列的数据进行了合并。求问大家怎么解决呀？

尝试了doLayout和minwidth都没用

部分代码：

    objectSpanMethod(data) {
      const { row, column, rowIndex, columnIndex } = data;
      if (columnIndex === 0) {
      // 根据重名的数据长度，计算合并的单元格长度
        const len = this.nameGroup(row.offerType);
        let lenName = this.nameLen(row.offerType);
        if (rowIndex === lenName) {
          return {
            rowspan: len, // 根据实际重复的名称合并，而不是像官网例子中写死合并2行
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
      this.$nextTick(()=>{
        this.$refs.multipleTable.doLayout()
      })
    }

Answer 1

可以写两个函数

1.在展开内容高度变化时触发重新计算：

expandTableContentHeightChange(index) {
  this.$nextTick(() => {
    const goodsTableForm = this.$refs.goodsTableForm;
    resetFixedExpandedRowHeight(index, goodsTableForm, 'contract_line_expand');//类名改成自己的
  });
}

2.重置固定列中展开行的高度：

export const resetFixedExpandedRowHeight = (index, currentTable, contentBoxClassName) => {
  const element = currentTable.$el;
  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 => 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].nextSibling.querySelector(`.${contentBoxClassName}`);
    const { height: originTableTrHeight } = originContentDiv.getBoundingClientRect();
    const fixedContentDiv = fixedTableTrList[index].nextSibling.querySelector(`.${contentBoxClassName}`);
    fixedContentDiv.style.height = `${originTableTrHeight}px`;
  }
}

代码示例：

methods: {
  objectSpanMethod(data) {
    const { row, column, rowIndex, columnIndex } = data;
    if (columnIndex === 0) {
      const len = this.nameGroup(row.offerType);
      let lenName = this.nameLen(row.offerType);
      if (rowIndex === lenName) {
        return {
          rowspan: len,
          colspan: 1,
        };
      } else {
        return {
          rowspan: 0,
          colspan: 0,
        };
      }
    }
    this.$nextTick(() => {
      setTimeout(() => {
        this.$refs.multipleTable.doLayout();
      }, 0);
    });
  },
  expandTableContentHeightChange(index) {
    this.$nextTick(() => {
      const goodsTableForm = this.$refs.goodsTableForm;
      resetFixedExpandedRowHeight(index, goodsTableForm, 'contract_line_expand');//类名改成自己的
    });
  }
}

样式调整：

/*vue2写法*/
/deep/ .el-table__expanded-cell {
  z-index: 100;
  padding: 0;
}
/*vue3写法*/
::v-deep .el-table__expanded-cell {
  z-index: 100;
  padding: 0;
}

.expand {
  width: calc(100vw - 100px);
  padding: 20px;
  background: #fff;
}