时间：2022-03-07 08:52:13 | 栏目：vue | 点击：次
在后台系统开发中，对于列表，常常有一些状态字段的展示，比如审核状态、退货申请状态等等，并且往往伴随有状态筛选的列表查询条件，同时状态显示对应不同颜色，在写代码时有些人往往是这么做的：
<template>
<el-form :model="query">
<el-form-item label="审批状态" prop="status">
<el-select v-model="query.status" clearable>
<el-option
v-for="item in statusOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
<el-button type="danger">重置</el-button>
</el-form-item>
</el-form>
<el-table :data="list">
<el-table-column label="审批状态">
<template #default="{ row }">
<el-tag v-if="row.status === 0" type="primary">审核中</el-tag>
<el-tag v-if="row.status === 1" type="success">审核成功</el-tag>
<el-tag v-if="row.status === 2" type="danger">审核失败</el-tag>
</template>
</el-table-column>
</el-table>
</template>
export default {
data() {
return {
query: {
status: null
},
statusOptions: [
{ label: '审核中', value: 0 },
{ label: '审核成功', value: 1 },
{ label: '审核失败', value: 2 }
],
list: []
}
}
}
以上代码虽然是实现了需求，但却显得不够优雅，代码维护成本较高：
针对上面的问题，咱们通过以下措施来进行抢救。
建立常量文件存放 statusOptions，增加 el-tag 组件的 type 字段来区分显示不同的颜色，最后将其导出。
// const/index.js
// 审核状态
const statusOptions = [
{ label: '审核中', value: 0, type: 'primary' },
{ label: '审核成功', value: 1, type: 'success' },
{ label: '审核失败', value: 2, type: 'danger' }
]
export {
statusOptions
}
// components/stats-tag.vue
<template>
<el-tag :type="getValue('type')">
{{ getValue('label') }}
</el-tag>
</template>
export default {
name: 'StatusTag',
props: {
options: {
type: Array,
required: true,
default: () => []
},
status: {
type: [String, Number],
required: true
}
},
computed: {
getValue({ options, status }) {
return (key) => {
const item = options.find(e => e.value === status)
return (item && item[key]) || ''
}
}
}
}
<template>
<el-form :model="query">
<el-form-item label="审批状态" prop="status">
<el-select v-model="query.status" clearable>
<el-option
v-for="item in statusOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
<el-button type="danger">重置</el-button>
</el-form-item>
</el-form>
<el-table :data="list">
<el-table-column label="审批状态">
<template #default="{ row }">
<!-- 使用 -->
<status-tag
:options="statusOptions"
:status="row.status"
/>
</template>
</el-table-column>
</el-table>
</template>
import StatusTag from '@/components/status-tag'
// 导入
import { statusOptions } from '@/const'
export default {
components: {
StatusTag
},
data() {
return {
statusOptions
}
}
}
经过优化后，如果有修改变动，只需要改动 const/index.js 文件即可，无需到处修。
// const/index.js
// 审核状态
const statusOptions = [
{ label: '审核中', value: 0, type: 'primary' },
{ label: '审核成功', value: 1, type: 'success' },
{ label: '审核失败', value: 2, type: 'danger' },
// 增加取消状态
{ label: '审核取消', value: 3, type: 'warning' }
]
export {
statusOptions
}