el-table刷新后table出現抖動現象

問題描述

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>