|
前言
在后台系统开发中，对于列表，常常有一些状态字段的展示，比如审核状态、退货申请状态等等，并且往往伴随有状态筛选的列表查询条件，同时状态显示对应不同颜色，在写代码时有些人往往是这么做的： <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书写状态标签内容请搜索wanshiok.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持wanshiok.com！
利用Vite2和Vue3实现网站国际化的全过程
如何使用Node.js判断png图片是否存在透明像素 |
