element-ui表格显示隐藏导致表头错乱
发布时间
阅读量:
阅读量
<span v-if="activeName == 'five'">
<el-table-column key='22' prop="interviewResultsStatus" label="面试结果" header-align="center" align="center">
<template slot-scope="scope">
<el-tag v-if="scope.row.interviewResultsStatus === 10" type="info">待面试</el-tag>
<el-tag v-if="scope.row.interviewResultsStatus === 20" type="success">面试通过</el-tag>
<el-tag v-if="scope.row.interviewResultsStatus === 30" type="danger">面试不通过</el-tag>
</template>
</el-table-column>
<el-table-column key='23' prop="interviewResultsReviewer" label="面试官" header-align="center" align="center"></el-table-column>
<el-table-column key='24' prop="interviewResultsRemark" label="面试备注" header-align="center" align="center"></el-table-column>
<el-table-column key='25' prop="businessStatusName" label="审核人" header-align="center" align="center"></el-table-column>
<el-table-column key='26' prop="businessStatus" label="采购审核" header-align="center" align="center">
<template slot-scope="scope">
<el-tag v-if="scope.row.businessStatus === 10" type="info">待审核</el-tag>
<el-tag v-if="scope.row.businessStatus === 20" type="success">通过</el-tag>
<el-tag v-if="scope.row.businessStatus === 30" type="danger">不通过</el-tag>
</template>
</el-table-column>
<el-table-column key='27' prop="businessStatusRemark" label="采购备注" header-align="center" align="center"></el-table-column>
<el-table-column key='28' prop="approachStatus" label="进场状态" header-align="center" align="center">
<template slot-scope="scope">
<el-tag v-if="scope.row.approachStatus === 10" type="info">待办理</el-tag>
<el-tag v-if="scope.row.approachStatus === 20" type="success">已办理</el-tag>
</template>
</el-table-column>
<el-table-column key='29' prop="notice" label="进场通知" header-align="center" align="center">
<template slot-scope="scope">
<el-tag v-if="scope.row.notice === 10" type="success">已通知</el-tag>
<el-tag v-else type="info">未通知</el-tag>
</template>
</el-table-column>
</span>
在表格中进行大量判断以显示该列的状态可能会使表头出现混乱。
解决办法:
给每一列增加一个唯一的key即可
<el-table-column key='29' prop="notice" label="进场通知" ></el-table-column>
全部评论 (0)
还没有任何评论哟~
