在使用状态切换时,由于使用的表格列,有时候会有不同,使用v-if做判断,在切换时,往往没有很准确的显示和隐藏掉相关列,会导致内容错乱;
会错乱的写法:
<el-table-column
prop="wait_day"
label="等待审批天数"
v-if="status==0"
>
<template slot-scope="scope">
<span>{{(scope.row.wait_day + "(天)")}}</span>
</template>
</el-table-column>
<el-table-column
v-if="status==1"
prop="valid_day"
label="有效日期"
>
</el-table-column>
<el-table-column v-if="status==2" :show-overflow-tooltip="true" label="备注" prop="audit_remark">
</el-table-column>
正确的写法:
<el-table-column
prop="wait_day"
label="等待审批天数"
v-if="status==0"
key="1"
>
<template slot-scope="scope">
<span>{{(scope.row.wait_day + "(天)")}}</span>
</template>
</el-table-column>
<el-table-column
v-if="status==1"
prop="valid_day"
label="有效日期"
key="2)"
>
</el-table-column>
<el-table-column v-if="status==2" key="3" :show-overflow-tooltip="true" label="备注" prop="audit_remark">
</el-table-column>
或者这样子也是可以的
<el-table-column
prop="wait_day"
label="等待审批天数"
v-if="status==0"
:key="Math.random()"
>
<template slot-scope="scope">
<span>{{(scope.row.wait_day + "(天)")}}</span>
</template>
</el-table-column>
<el-table-column
v-if="status==1"
prop="valid_day"
label="有效日期"
:key="Math.random()"
>
</el-table-column>
<el-table-column v-if="status==2" :key="Math.random()" :show-overflow-tooltip="true" label="备注" prop="audit_remark">
</el-table-column>
网友评论