vue-element 遇到的问题

element-ui中的el-table-column使用v-if导致列位置与数据错乱

错误代码

<div v-if="form.dimension == '1'" style="display:inline-block">
<el-table-column  align="center" sortable label-class-name="text-blue-900" prop="attendanceCount" label="打卡" min-width="100" />
<el-table-column  align="center" sortable label-class-name="text-blue-900" prop="jobRecord" label="工作记录" min-width="100" />
<el-table-column  align="center" sortable label-class-name="text-blue-900" prop="report" label="重要线索上报量" min-width="150" />
<el-table-column align="center" sortable label-class-name="text-blue-900" prop="disputeResolution" label="纠纷调解" min-width="100" />
<el-table-column align="center" sortable label-class-name="text-blue-900" prop="schoolSecurity" label="校园安保" min-width="100" />
<el-table-column  align="center" sortable label-class-name="text-blue-900" prop="jobPlan" label="工作安排" min-width="100" />
</div>

正确代码

// **** Math.random()  会重新渲染一遍

<el-table-column v-if="form.dimension == '1'" :key="Math.random()" align="center" sortable label-class-name="text-blue-900" prop="attendanceCount" label="打卡" min-width="100" />
<el-table-column v-if="form.dimension == '1'" :key="Math.random()" align="center" sortable label-class-name="text-blue-900" prop="jobRecord" label="工作记录" min-width="100" />
<el-table-column v-if="form.dimension == '1'" :key="Math.random()" align="center" sortable label-class-name="text-blue-900" prop="report" label="重要线索上报量" min-width="150" />
<el-table-column v-if="form.dimension == '1'" :key="Math.random()" align="center" sortable label-class-name="text-blue-900" prop="disputeResolution" label="纠纷调解" min-width="100" />
<el-table-column v-if="form.dimension == '1'" :key="Math.random()" align="center" sortable label-class-name="text-blue-900" prop="schoolSecurity" label="校园安保" min-width="100" />
<el-table-column v-if="form.dimension == '1'" :key="Math.random()" align="center" sortable label-class-name="text-blue-900" prop="jobPlan" label="工作安排" min-width="100" />