element table 自定义列 + 固定列 导致显示问题

一、需求

    使用element-ui 的 table组件实现自定义列 + 固定列功能
    这里只有解决方案，没有追根溯源，为啥嘞？ 因为我菜 T.T

二、解决方案

    直接上才艺
    ①动态切换表格时，（随机性的）导致固定列塌陷（固定列的内容会坠下来），使用doLayout() 方法解决，具体如下：
    在 vue的 updated 中调用即可，也有在mounted，beforeUpdate中调用的，自行尝试。

updated() {
    this.$refs.table.doLayout()
  }

    1
    2
    3

    ②解决了上述问题后 可能还会遇到这个问题：动态切换表头时，table发生闪烁问题，
    这边时直接设置 table 的 .cell样式的高度给一个固定值，具体如下

//重写表格样式，不在自动计算，解决表格渲染时闪烁问题
//不写这个使用v-if重新渲染表格的时候会再次计算下宽高，导致了抖动div高度=table容器高度/行数
// -----取自某位老哥的分析
.el-table .cell {
    height: 25px!important;
  }

    1
    2
    3
    4
    5
    6

    ③表格自适应高度，我这边简单的提供一个思路的，因为我觉得我的实现不是最优解
    我们通过实践发现，当table组件有height 或者 max-height的时候才会出现纵向滚动条，但是我们实际的业务需求和开发中，表格的高度往往需要自适应高度，如果手动为table body加滚动，就会出现固定列不随表格内容滚动情况，
    解决方案如下： 动态设置table组件的height的属性值

:height="maxHeight"

this.maxHeight = this.$refs.table.$el.getBoundingClientRect().height

    1
    2
    3

    具体的api呀 方法啥的 都可以自己找的 不一定非要我这个写法，主要是思路：动态的赋予height的值就ok了