element 表格 列 隱藏/顯示，列順序錯亂

背景

一個 el-table 表格，須要在不一樣大小的屏幕上顯示不一樣的列數，而後用戶能夠切換是否顯示所有列數。

不靠譜的解決方案

1. 列上添加 v-show，不知道爲啥，反正很差使。
2. 列上添加 v-if 併爲每列添加 :key="Math.random()"，CSDN 一位做者 使用這個方法解決了這個問題，可是經我嘗試以後並很差使。

靠譜的解決方案

列上添加 v-if 併爲每列綁定一個固定的 key。這個 key 能夠是手動寫的，也能夠是列的 index。
示例參考：CSDN 另外一位做者

<el-table :data="tableData" border stripe>
  <el-table-column key="1" type="index" label="序號"></el-table-column>
  <el-table-column key="2" prop="orgName" label="單位"></el-table-column>
  <el-table-column key="3" prop="personName" label="姓名"></el-table-column>
  <el-table-column key="4" v-if="staticsTmp" prop="ruleAttendanceDuration" label="外勤（小時）"></el-table-column>
  <el-table-column key="5" v-if="staticsTmp" prop="innerDutyDuration" label="內勤（小時）"></el-table-column>
  <el-table-column key="6" v-if="staticsTmp" prop="leaveCount" label="請假（小時）"></el-table-column>
  <el-table-column key="7" v-if="staticsTmp" prop="changeCount" label="調休（小時）"></el-table-column>
  <el-table-column key="8" v-if="staticsTmp" prop="lendCount" label="借出（小時）"></el-table-column>
</el-table>