本文最后更新于 461 天前，其中的信息可能已经有所发展或是发生改变。
基本写法
<template>
<a-tag v-if="item.projectStatus == 'YiWanCheng'" color="green"> 已启动 </a-tag>
<a-tag v-if="item.projectStatus == 'Aborted'" color="#9e9e9e"> 已终止 </a-tag>
<a-tag v-if="item.projectStatus == 'ShenPiZhong'" color="orange"> 审核中 </a-tag>
</template>
优化1
<template>
<a-tag :color="statusColors[item.projectStatus]">
{{ statusTexts[item.projectStatus] }}
</a-tag>
</template>
<script>
export default {
data() {
return {
statusColors: {
YiWanCheng: 'green',
Aborted: '#9e9e9e',
ShenPiZhong: 'orange',
},
statusTexts: {
YiWanCheng: '已启动',
Aborted: '已终止',
ShenPiZhong: '审核中',
},
};
},
};
</script>
优化2
<template>
<a-tag :color="statusColor">{{ statusText }}</a-tag>
</template>
<script>
export default {
computed: {
statusColor() {
const colorMap = {
YiWanCheng: 'green',
Aborted: '#9e9e9e',
ShenPiZhong: 'orange',
};
return colorMap[this.item.projectStatus];
},
statusText() {
const textMap = {
YiWanCheng: '已启动',
Aborted: '已终止',
ShenPiZhong: '审核中',
};
return textMap[this.item.projectStatus];
},
},
};
</script>
