Vue后台中优雅书写状态标签的方法实例

目录
  • 前言
  • 优化
    • 二次封装 el-tag 组件
    • 使用
  • 总结

前言

在后台系统开发中,对于列表,常常有一些状态字段的展示,比如审核状态、退货申请状态等等,并且往往伴随有状态筛选的列表查询条件,同时状态显示对应不同颜色,在写代码时有些人往往是这么做的:

<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书写状态标签内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue后台中优雅书写状态标签的方法实例

    目录 前言 优化 二次封装 el-tag 组件 使用 总结 前言 在后台系统开发中,对于列表,常常有一些状态字段的展示,比如审核状态.退货申请状态等等,并且往往伴随有状态筛选的列表查询条件,同时状态显示对应不同颜色,在写代码时有些人往往是这么做的: <template> <el-form :model="query"> <el-form-item label="审批状态" prop="status"> <

  • 在vue项目中优雅的使用SVG的方法实例详解

    1.基础介绍 本文旨在介绍如何在项目中配置和方便的使用svg图标. 本文以vue项目为例,当然在react中的使用原理基本相似. svg图标可以直接通过img标签来使用,也可当做icon来使用. 本文是参考了鑫旭大佬的文章:SVG Sprite技术介绍. 2.配置 安装svg-sprite-loader.通过vue-cli脚手架创建的项目默认情况下会使用 url-loader 对svg进行处理,所以需要处理下: { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, l

  • Vuex 在Vue 组件中获得Vuex 状态state的方法

    Vuex使用单一状态树(一个对象就包含了全部的应用层级状态),它作为唯一数据源存在,每个应用仅仅有一个store实例. 单一状态树使得我们能够直接定位任一特定的状态片段,在调试过程中也能轻易地取得整个当前应用状态的快照. 在Vue组件中获得Vuex状态 Vuex的状态存储是相应式的.在Vue组件中获取Vuex状态总共有 五种 可行的方法. 1.从store实例中读取状态最简单的方法就是在计算属性中返回某个状态:(需要导入store组件) const Counter={ template:`<di

  • Python中优雅使用assert断言的方法实例

    目录 什么是 assert 断言 断言和异常的使用场景 使用断言的几个原则 建议不使用断言的情况: 总结 什么是 assert 断言 Assert statements are a convenient way to insert debugging assertions into a program 断言声明是用于程序调试的一个便捷方式.断言可以看做是一个 debug 工具,Python 的实现也符合这个设计哲学,在 Python 中 assert 语句的执行是依赖于__debug__这个内置

  • Python中优雅处理JSON文件的方法实例

    目录 1. 引言 2. 什么是JSON文件? 3. 使用Python处理JSON文件 3.1. 将JSON文件读取为字典类型 3.2. 将JSON文件读取为Pandas类型 3.3. 使用Pandas读取嵌套JSON类型 3.4. 访问特定位置的数据 3.5. 导出JSON 3.6. 格式化输出 3.7. 输出字段排序 4.总结 5.参考 1. 引言 在本文中,我们将学习如何使用Python读取.解析和编写JSON文件. 我们将讨论如何最好地处理简单的JSON文件以及嵌套的JSON文件,当然我们

  • vue项目中轮询状态更改方式(钩子函数)

    目录 vue项目中轮询状态更改 vue轮询方法及清除 vue项目中轮询状态更改 在实际项目中,对于实时存储改变的数据,如果不是使用websoct,就需要使用到轮询,对于轮询实际是前端设置的定时器,不停存储获取数据并进行更改. 而对于退出该界面后,轮询逻辑依然在定时器的执行中进行,此时需要用到钩子函数判断路由离开状态后,进行清除定时器 //离开当前页面 beforeRouteLeave(to, from, next) { window.clearInterval(this.myInterval);

  • 利用vue.js实现被选中状态的改变方法

    在使用原型实现使不选中状态改变之后,接触到vue,就想着能不能使用vue再把功能实现一边,在上篇中的页面并没有动态实现页面,所有的数据也都是直接写在html中.而使用vue之后,已经能够实现页面根据数据的多少动态生成.而且代码量也大幅度减少. html部分的代码: <div data-role="page " class="page "> <div class="center " id="app"> &

  • 关于在vue 中使用百度ueEditor编辑器的方法实例代码

    1. 安装  npm i vue-ueditor --save-dev 2.从nodemodels  取出ueditor1_4_3_3 这整个目录,放入vue 的 static 目录 3.配置 ueditor.config.js 的  21行代码  更改路径   var URL = '/static/ueditor1_4_3_3/' || getUEBasePath();  (1)     serverUrl: URL + 'php/controller.php',  这里是你配置的上传内容的

  • 在 Vue 应用中使用 Netlify 表单功能的方法详解

    Netlify 带有内置表单处理功能,可以用来存储表单数据,下载 csv 文件,同时可以在接收到新的提交时发送邮件通知或者通过配置 webhook 发送请求. 它是通过在部署应用时直接解析 HTML 文件,识别 html 中的 form 标签来实现的,本文记录如何在一个 Vue 应用中使用表单功能. 开发 首先使用@vue/cli 新建一个 Vue 应用,完成一系列步骤后,运行应用 vue create my-awesome-app ... yarn serve 创建一个 form 表单 <!-

  • 为vue项目自动设置请求状态的配置方法

    在进入一个页面的时候,一般在获取数据的同时,会先显示一个 loading ,等请求结束再隐藏 loading 渲染页面,只需要用一个属性去记录请求的状态,再根据这个状态去渲染页面就好了 async handler() { this.loading = true await fetch() this.loading = false } 虽然是很简单的功能,可是要处理的地方多的时候,还是很繁琐的,就想着能不能统一设置处理请求的 loading ,然后页面根据 loading 的状态决定要显示的内容,

随机推荐