在后臺(tái)系統(tǒng)開(kāi)發(fā)中，對(duì)于列表，常常有一些狀態(tài)字段的展示，比如審核狀態(tài)、退貨申請(qǐng)狀態(tài)等等，并且往往伴隨有狀態(tài)篩選的列表查詢條件，同時(shí)狀態(tài)顯示對(duì)應(yīng)不同顏色，在寫(xiě)代碼時(shí)有些人往往是這么做的：

<template> <el-form :model='query'> <el-form-item label='審批狀態(tài)' 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='審批狀態(tài)'> <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: [] } }}

以上代碼雖然是實(shí)現(xiàn)了需求，但卻顯得不夠優(yōu)雅，代碼維護(hù)成本較高：

針對(duì)上面的問(wèn)題，咱們通過(guò)以下措施來(lái)進(jìn)行搶救。

建立常量文件存放 statusOptions，增加 el-tag 組件的 type 字段來(lái)區(qū)分顯示不同的顏色，最后將其導(dǎo)出。

// const/index.js// 審核狀態(tài)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='審批狀態(tài)' 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='審批狀態(tài)'> <template #default='{ row }'><!-- 使用 --><status-tag :options='statusOptions' :status='row.status'/> </template> </el-table-column> </el-table></template>

import StatusTag from ’@/components/status-tag’// 導(dǎo)入import { statusOptions } from ’@/const’export default { components: { StatusTag }, data() { return { statusOptions } }}

經(jīng)過(guò)優(yōu)化后，如果有修改變動(dòng)，只需要改動(dòng) const/index.js 文件即可，無(wú)需到處修。

// const/index.js// 審核狀態(tài)const statusOptions = [ { label: ’審核中’, value: 0, type: ’primary’ }, { label: ’審核成功’, value: 1, type: ’success’ }, { label: ’審核失敗’, value: 2, type: ’danger’ }, // 增加取消狀態(tài) { label: ’審核取消’, value: 3, type: ’warning’ }]export { statusOptions}總結(jié)

到此這篇關(guān)于Vue后臺(tái)中優(yōu)雅書(shū)寫(xiě)狀態(tài)標(biāo)簽的文章就介紹到這了,更多相關(guān)Vue書(shū)寫(xiě)狀態(tài)標(biāo)簽內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！