亲宝软件园·资讯

展开

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

8号的凌晨4点 人气:0
想了解Vue后台中优雅书写状态标签的方法实例的相关内容吗,8号的凌晨4点在本文为您仔细讲解Vue书写状态标签的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue,状态标签,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: []
    }
  }
}

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

优化

针对上面的问题,咱们通过以下措施来进行抢救。

抽离变量

建立常量文件存放 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
}

总结

加载全部内容

相关教程
猜你喜欢
用户评论