Vue后台中如何优雅的书写状态标签

这篇文章主要介绍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: []    }  }}

以上代码虽然是实现了需求，但却显得不够优雅，代码维护成本较高：

• 标签里充斥着较多的 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后台中如何优雅的书写状态标签”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网精选频道！