使用 v-if 控制某一列的显示隐藏时,有时候请求的是同一个id,这时就不会重新获取表格数据进行更新,可能会出现紊乱的情况。
描述:如下两图,计划审核的时候需要展示多选列,审核状态列,操作列;而在“计划信息”中不需要展示这三列
解决办法:给表格的每一列加上 :key="Math.random()",这样表格就会重新渲染了。
<el-table
:data="tableData"
ref="multipleTable"
stripe
@selection-change="handleSelectionChange"
>
<el-table-column
v-if="isExamine"
:key="Math.random()"
:selectable="selectable"
type="selection"
width="55"
></el-table-column>
<el-table-column
:key="Math.random()"
prop="planName"
label="临时计划名称"
></el-table-column>
<el-table-column
:key="Math.random()"
prop="bgnDate"
label="开始日期"
width="110px"
></el-table-column>
<el-table-column
:key="Math.random()"
prop="endDate"
label="结束日期"
width="110px"
></el-table-column>
<el-table-column
:key="Math.random()"
prop="inspCount"
label="巡视次数"
width="80px"
></el-table-column>
<el-table-column
v-if="isExamine"
:key="Math.random()"
prop="status"
label="审核状态"
width="90px"
></el-table-column>
<el-table-column
v-if="isExamine"
:key="Math.random()"
label="操作"
width="100"
>
<template slot-scope="scope">
<div>
<el-button
type="text"
@click="examineHandle(1, scope.row.tempinspId)"
>通过</el-button
>
<el-button
type="text"
@click="examineHandle(2, scope.row.tempinspId)"
>回退</el-button
>
</div>
<span v-show="scope.row.checkFlag === 'Checked'">已审核</span>
</template>
</el-table-column>
</el-table>