el-table动态列的时候,数据不刷新的时候如何让表格重新渲染

1,013 阅读1分钟

使用 v-if 控制某一列的显示隐藏时,有时候请求的是同一个id,这时就不会重新获取表格数据进行更新,可能会出现紊乱的情况。

描述:如下两图,计划审核的时候需要展示多选列,审核状态列,操作列;而在“计划信息”中不需要展示这三列

image.png

image.png

解决办法:给表格的每一列加上 :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>