Vue后台中优雅书写状态标签的方法实例
短信预约 -IT技能 免费直播动态提醒
前言
在后台系统开发中，对于列表，常常有一些状态字段的展示，比如审核状态、退货申请状态等等，并且往往伴随有状态筛选的列表查询条件，同时状态显示对应不同颜色，在写代码时有些人往往是这么做的：
<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: []
}
}
}
以上代码虽然是实现了需求，但却显得不够优雅，代码维护成本较高：
- 标签里充斥着较多的 v-if 且与 data 里的数据重复，造成冗余。
- 当有新增或修改时，需要改动多个地方，例如要改动文案时下拉框和表格里的都要改。
- 如果是多个页面都有该状态需要显示，复制粘贴，最后当需求变动时势必会增加改动成本。
优化
针对上面的问题，咱们通过以下措施来进行抢救。
抽离变量
建立常量文件存放 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
}
二次封装 el-tag 组件
// 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
}
总结
到此这篇关于Vue后台中优雅书写状态标签的文章就介绍到这了,更多相关Vue书写状态标签内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
