快捷導(dǎo)航

Vue后臺(tái)中優(yōu)雅書寫狀態(tài)標(biāo)簽的方法實(shí)例

更新時(shí)間：2021年08月02日 15:29:44 作者：8號(hào)的凌晨4點(diǎn)

在Vue中,我們可以非常便捷地通過標(biāo)簽實(shí)現(xiàn)狀態(tài)的保存,這篇文章主要給大家介紹了關(guān)于Vue后臺(tái)中如何優(yōu)雅的書寫狀態(tài)標(biāo)簽的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

在后臺(tái)系統(tǒng)開發(fā)中，對(duì)于列表，常常有一些狀態(tài)字段的展示，比如審核狀態(tài)、退貨申請(qǐng)狀態(tài)等等，并且往往伴隨有狀態(tài)篩選的列表查詢條件，同時(shí)狀態(tài)顯示對(duì)應(yīng)不同顏色，在寫代碼時(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ù)成本較高：

標(biāo)簽里充斥著較多的 v-if 且與 data 里的數(shù)據(jù)重復(fù)，造成冗余。
當(dāng)有新增或修改時(shí)，需要改動(dòng)多個(gè)地方，例如要改動(dòng)文案時(shí)下拉框和表格里的都要改。
如果是多個(gè)頁面都有該狀態(tài)需要顯示，復(fù)制粘貼，最后當(dāng)需求變動(dòng)時(shí)勢(shì)必會(huì)增加改動(dòng)成本。

優(yōu)化

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

抽離變量

建立常量文件存放 statusOptions，增加 el-tag 組件的 type 字段來區(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)過優(yōu)化后，如果有修改變動(dòng)，只需要改動(dòng) const/index.js 文件即可，無需到處修。

// 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
}