JavaScript源代码 Vue后台中优雅书写状态标签的方法实例
在Vue后台系统开发中，对于列表，常常有一些状态字段的展示，比如审核状态、退货申请状态等等，并且往往伴随有状态筛选的列表查询条件，同时状态显示对应不同颜色。在写代码时有些人往往是这么做的：直接在模板中使用条件语句来判断状态，并显示对应的颜色标签。但是这种方式存在一些问题，例如代码难以维护、重复代码多、扩展性不好等。
为了优雅地书写状态标签，需要对代码进行优化和重构。下面是优化后的代码实例：
首先，需要抽离变量，定义状态选项数组：
```
export default {
data() {
return {
query: {
status: null
},
statusOptions: [
{ label: '审核中', value: 0 },
{ label: '审核成功', value: 1 },
{ label: '审核失败', value: 2 }
]
}
}
}
```
然后，需要二次封装 el-tag 组件，使用函数式编程的方式来处理状态显示：
```
<template #default="{ row }">
<el-tag :type="getStatusType(row.status)">{{ getStatusLabel(row.status) }}</el-tag>
</template>
export default {
methods: {
getStatusType(status) {
switch (status) {
case 0:
return 'primary';
case 1:
return 'success';
case 2:
return 'danger';
default:
return '';
}
},
getStatusLabel(status) {
switch (status) {
case 0:
return '审核中';
case 1:
return '审核成功';
case 2:
return '审核失败';
default:
return '';
}
}
}
}
```
通过这种方式，代码变得更加简洁、易维护和扩展性好。同时，状态选项数组也可以被复用在其他地方。
此外，还可以使用计算属性来处理状态显示，例如：
```
<template #default="{ row }">
<el-tag :type="statusType(row.status)">{{ statusLabel(row.status) }}</el-tag>
</template>
export default {
computed: {
statusType() {
return function(status) {
switch (status) {
case 0:
return 'primary';
case 1:
return 'success';
case 2:
return 'danger';
default:
return '';
}
}
},
statusLabel() {
return function(status) {
switch (status) {
case 0:
return '审核中';
case 1:
return '审核成功';
case 2:
return '审核失败';
default:
return '';
}
}
}
}
}
```
通过使用计算属性，可以使代码变得更加简洁和易维护。
优雅地书写状态标签需要对代码进行优化和重构，使用函数式编程和计算属性可以使代码变得更加简洁、易维护和扩展性好。
我的内容管理
展开
