vue+element-ui中的el-table-column配合v-if导致列展示数据出错

  <!-- 当是 我的上传 的时候才展示 -->
<el-table-column v-if="showFormal" prop="dictAuditStatus" label="审核状态" align="center" width="120px">
   <template slot-scope="scope">
 <statusLabel :status_label="scope.row.dictAuditStatus.toString() | auditFilter(dictAuditStatus)" />
        </template>
      </el-table-column>

当审核状态发生改变时，statusLabel组件中的审核状态却没有发生变化

解决方法

给组件添加key并且添加key为随机数 key="Math.random()"，具体如下所示：

  <statusLabel :status_label="scope.row.dictAuditStatus.toString() | auditFilter(dictAuditStatus)" :key="Math.random()" />

key的作用

key的作用主要是为了高效的更新虚拟DOM
另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们
key是为每个vnode指定唯一的id，在同级vnode的Diff过程中，可以根据key快速的进行对比，来判断是否为相同节点；若为相同节点，则不进行重新渲染

这里加的目的

给key加一个随机数，则意味着每次只要一发生改变，便让该组件进行重新渲染