脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue书写状态标签

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

 更新时间：2021年08月02日 15:29:44   作者：8号的凌晨4点  
在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后台中优雅书写状态标签的文章就介绍到这了,更多相关Vue书写状态标签内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

相关文章

  • vue项目如何引入公共头部底部

    vue项目如何引入公共头部底部

    这篇文章主要介绍了vue项目如何引入公共头部底部问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-01-01
  • vue中格式化时间过滤器代码实例

    vue中格式化时间过滤器代码实例

    这篇文章主要介绍了vue格式化时间过滤器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vite打包分割代码的详细过程记录

    Vite打包分割代码的详细过程记录

    项目创建Vite是一个web开发构建工具,由于其原生ES模块导入方法,它允许快速提供代码,下面这篇文章主要给大家介绍了关于Vite打包分割代码的相关资料,需要的朋友可以参考下
    2022-09-09
  • Vue子组件调用父组件方法案例详解

    Vue子组件调用父组件方法案例详解

    这篇文章主要介绍了Vue子组件调用父组件方法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • vue的Virtual Dom实现snabbdom解密

    vue的Virtual Dom实现snabbdom解密

    这篇文章主要介绍了vue的Virtual Dom实现- snabbdom解密，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • vue3.x使用swiper实现卡片轮播

    vue3.x使用swiper实现卡片轮播

    这篇文章主要为大家详细介绍了vue3.x使用swiper实现卡片轮播，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • Vue3搭建组件库开发环境的示例详解

    Vue3搭建组件库开发环境的示例详解

    这篇文章给大家分享Vue3搭建组件库开发环境，给大家讲解依次搭建组件库、example、文档、cli，本文内容是搭建组件库的开发环境的过程，感兴趣的朋友跟随小编一起看看吧
    2022-11-11
  • Vue Mock.js介绍和使用与首页导航栏左侧菜单搭建过程

    Vue Mock.js介绍和使用与首页导航栏左侧菜单搭建过程

    Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率，这篇文章主要介绍了Vue Mock.js介绍和使用与首页导航栏左侧菜单搭建,需要的朋友可以参考下
    2023-09-09
  • VueQuillEditor富文本上传图片(非base64)

    VueQuillEditor富文本上传图片(非base64)

    这篇文章主要介绍了VueQuillEditor富文本上传图片(非base64),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • vue滚动轴插件better-scroll使用详解

    vue滚动轴插件better-scroll使用详解

    这篇文章主要为大家详细介绍了vue滚动轴插件better-scroll的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-10-10

最新评论