摘要：
问题分析<；Key=“index+Math.random（）”//注意！渲染时，键使用Math.random（），这会导致每次都重新渲染标头！问题解决<。Key=“'t3'+index”//在此处写入固定值，刷新数据不会抖动>；元素UI表问题描述；v-if控制的列渲染不正确。然后发现，与v-if键绑定的列可以正常渲染。
问题描述
el-table刷新后table出现抖动现象，而且如果使用了排序功能，点击排序后table抖动渲染后排序的选中状态图标消失了。
问题分析
<el-table-column
:key="index + Math.random()" // 注意！！！
>
渲染时key使用了Math.random()导致每次都是重新渲染表头。
所以出现抖动现象。
问题解决
<el-table-column
:key="'t3' + index" // 这里写成一个固定的值就不会出现刷新数据抖动了
>
备注
组件：element-ui el-table
问题描述：勾选批量选择框、切换tab、输入查询条件时，table表格出现抖动，体验极差。
原因：切换不同的tab，需要增减（显隐）不同的列，所以用v-if来控制，当增减较多列时，用v-if控制的列出现渲染不正确问题。然后发现给v-if的列绑定 key 就可以正常渲染了，一开始这样写 :key="Math.random()"，开始出现上面所描述的table表格抖动闪动问题。花了较长时间去寻找解决办法，一直无果，最后发现给 key 绑定确定的值，例如 :key="1"，:key="2" ，抖动现象就没了......
总结：用 v-if 控制增减 table 的列，有时会出现渲染不对问题，可以通过给这些列绑定key以正确渲染，例如 :key="1"。踩的坑是写成 :key="Math.random()"，导致出现table抖动问题
el-table设置最大高度
<el-table ref="tableRef" :data="data" :max-height="tableHeight"></el-table>
<script>
export default {
data() {
return {
tableHeight: 0
}
},
mounted() {
this.$nextTick(() => {
this.tableHeight = window.innerHeight - 50;
//后面的50：根据需求空出的高度，自行调整
})
}
}
</script>