以下代码:
第一种:
<el-table-column
prop="status"
label="状态"
width="150px"
align="center">
<template slot-scope="scope">
{{ statusbtn(scope.row.status) }}
</template>
</el-table-column>
statusOptions: [{
id: 1,
name: '待提交'
}, {
id: 2,
name: '已提交、进行中'
}, {
id: 3,
name: '已申请'
}, {
id: 4,
name: '已中止'
}, {
id: 5,
name: '审核通过'
}, {
id: 6,
name: '审核拒绝'
}, {
id: -99,
name: '已删除'
}],
methods方法:
statusbtn(val) {
for (const key in this.statusOptions) {
if (this.statusOptions[key].id === val) {
return this.statusOptions[key].name
}
}
},
第二种:
<el-table-column
prop="status"
label="状态"
width="150px"
align="center"
>
<template slot-scope="scope">
<!-- {{ statusbtn(scope.row.status) }} -->
{{ scope.row.status===1?'待提交':scope.row.status===2?'已提交、进行中':scope.row.status===3?'已申请':scope.row.status===4?'已中止':scope.row.status===5?'审核通过':scope.row.status===6?'审核拒绝':scope.row.status===-99?'已删除':'状态有误' }}
</template>
</el-table-column>
第三种:
<el-table-column
prop="status"
label="状态"
width="150px"
align="center"
:formatter="handleStatus"
/>
methods方法:
handleStatus(row, column, cellValue, index) {
switch (cellValue) {
case 1:
return '待提交'
case 2:
return '处理中'
case 3 :
return '已完成'
}
},