基本写法

1
2
3
4
5
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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>

http://xiaodongxier.github.io/pages/0.html
作者
WangYongJie
发布于
2023年9月26日
更新于
2023年9月27日
许可协议