element-ui Table多级表头且右侧具有浮动列表格错乱，浮动列有些显示异常问题的解决方法

首先说一下需求，表格由固定列与动态表头（即请求接口后根据数据动态渲染）组成，其中固定列里包含有多级表头，动态表头中的一些列需要浮动在右侧。

最终效果

接下来说一下遇到的坑及解决方法

问题：当表格设置最小高度且进行浮动表头的追加时表格显示异常

解决方法：可将表格的高度设置成自动或者当数据请求完毕时调用table的doLayout方法

::v-deep #mTable .table {
    min-height: auto;
    margin-top: 40px;
  }

this.$nextTick(() => {
    this.$refs.mTable.$refs.consultOrder.doLayout()
})

注：这里我还发现一个问题，当滚动条在浮动块的下方时，无法进行滑动操作，所以我是直接将表格的高度设置成自动。

接下来可能有些眼尖的同学就发现了异常了，浮动的列表头显示不对呀，本来操作应该是在最后一列的，怎么都整体往前移了呢。

当table设置有浮动项时，会生成有两个表头

此时分别对两个的thead进行展开，展开后发现两者之前存在一些不同，我们前面的可载货物是多级表头，所以我们把它的colspan设置成了2，但对el-table__fixed-right展开后发现可载货物这一列的colspan居然是1。

el-table__header-wrapper

el-table__fixed-right>el-table__fixed-header-wrapper

解放方法：因为我们多级表头是在el-table的:header-cell-style里进行处理的，所以我们在那里分别对el-table__header-wrapper以及el-table__fixed-header-wrapper进行多级表头的colspan设置。

discountHeaderStyle({ row, column, rowIndex, columnIndex }) { // 表头单元格自定义样式
  if (column.label === '') { // label为空则不显示该表头
    return { display: 'none' }
  }
  const headerSet = this.tableSetting.headerSet
  if (headerSet) {
    for (let i = 0, len = headerSet.length; i < len; i++) {
      if (headerSet[i].label === column.label) {
        this.$nextTick(() => {
          if (document.getElementsByClassName(column.id).length !== 0) {
            const dom = document.getElementsByClassName('el-table__header-wrapper')[0].getElementsByClassName(column.id)
            dom[0].setAttribute('colspan', headerSet[i].colspan)
            const dom1 = document.getElementsByClassName('el-table__fixed-header-wrapper')
            if (dom1.length !== 0) {
              const _dom1 = dom1[0].getElementsByClassName(column.id)
              _dom1[0].setAttribute('colspan', headerSet[i].colspan)
            }
          }
        })
        return
      }
    }
  }
}

注：这里需要先找到el-table__header-wrapper这父一元素再找里面的th多级表头列子元素，不可直接找getElementsByClassName(column.id)，不然table里的tbody元素也会受此影响。

温馨提示：本人也是刚工作不久的前端程序员，也在慢慢的学习摸索当中。此文章是我发布的第一篇文章，可能有些地方描述的并不是很清晰，望大家能多多理解，如果大家有其它好的解决方法，也可以在评论区里留言，互相借鉴学习。