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元素也会受此影响。
温馨提示：本人也是刚工作不久的前端程序员，也在慢慢的学习摸索当中。此文章是我发布的第一篇文章，可能有些地方描述的并不是很清晰，望大家能多多理解，如果大家有其它好的解决方法，也可以在评论区里留言，互相借鉴学习。
作者：cheer_zsy
链接：https://juejin.cn/post/7024307547704295454