ElementUI 里，防止表格在新增减少列的时候出现表格跳动和高度变化

就是有个功能，指标配置，点了之后，显示或不显示表格某个列

一般有变化后，表格就会重新绘制数据表，如果不加处理，可能会出现高度变化。如果固定了某一列的话，还会出现表格跳动（固定的那列错位）。

 

解决办法：

加一个key，只要每次增减列的时候key值有变化，重绘表格的时候就不会影响到整体布局了

步骤：

step 1 固定高度

/deep/ .el-table {
        .el-table__body{
            height: 99.9%!important;
        }
    }

step 2 加":key"，data里加上 toggleIndex: 0,

<el-table
                :data="tableData"
                :key="toggleIndex"
                style="width: 100%"
                :height="height">
            <el-table-column
                    v-for="item in trList"
                    :fixed="item.label == '名称'"
                    :prop="item.value"
                    :label="item.label"
                    :width="item.width"
                    v-if="item.isShow">
            </el-table-column><!--  -->
        </el-table>

step 3 在增减列的方法里，让toggleIndex有变化（我是toggleIndex++;）

handleCheckBoxChange(data,index) {
                this.toggleIndex++;
                //增减一列的方法 略;
            },