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>