preface

In background system development, for the list, there are often some status field display, such as review status, return application status and so on, and often accompanied by a list of status screening query conditions, at the same time, the status display corresponding to different colors, when writing code, some people tend to do so:

<template>
  <el-form :model="query">
    <el-form-item label="Approval Status" 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">The query</el-button>
      <el-button type="danger">reset</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="list">
    <el-table-column label="Approval Status">
      <template #default="{ row }">
        <el-tag v-if="row.status === 0" type="primary">In the review</el-tag>
        <el-tag v-if="row.status === 1" type="success">Review the success</el-tag>
        <el-tag v-if="row.status === 2" type="danger">Audit failure</el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>
Copy the code

export default {
  data() {
    return {
      query: {
          status: null
      },
      statusOptions: [{label: 'Under review'.value: 0 },
          { label: 'Audit successful'.value: 1 },
          { label: 'Audit failed'.value: 2}].list: []}}}Copy the code

Although the above code implements the requirements, it is not elegant enough and the maintenance cost of the code is high:

• Tags are full of v-If and duplicate with data, resulting in redundancy.
• When something is added or modified, it needs to be changed in many places, such as the drop-down box of the copy and the table.
• If multiple pages have this state to display, copy and paste, when the demand changes, it will inevitably increase the cost of change.

To optimize the

In view of the above problems, we adopt the following measures to rescue.

Out of the variable

Create a constant file to store statusOptions, add the type field of the el-tag component to display different colors, and export it.

// const/index.js
// Audit status
const statusOptions = [
  { label: 'Under review'.value: 0.type: 'primary' },
  { label: 'Audit successful'.value: 1.type: 'success' },
  { label: 'Audit failed'.value: 2.type: 'danger'}]export {
  statusOptions
}
Copy the code

Secondary encapsulation of el-Tag components

// components/stats-tag.vue
<template>
  <el-tag :type="getValue('type')">
    {{ getValue('label') }}
  </el-tag>
</template>
Copy the code

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]) || ' '}}}}Copy the code

use

<template>
  <el-form :model="query">
    <el-form-item label="Approval Status" 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">The query</el-button>
      <el-button type="danger">reset</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="list">
    <el-table-column label="Approval Status">
      <template #default="{ row }">
        <! - use - >
        <status-tag 
          :options="statusOptions"
          :status="row.status"
        />
      </template>
    </el-table-column>
  </el-table>
</template>
Copy the code

import StatusTag from '@/components/status-tag'
/ / import
import { statusOptions } from '@/const'

export default {
  components: {
    StatusTag
  },
  
  data() {
    return {
      statusOptions
    }
  }
}
Copy the code

After optimization, if changes are made to the const/index.js file, you only need to change it.

// const/index.js
// Audit status
const statusOptions = [
  { label: 'Under review'.value: 0.type: 'primary' },
  { label: 'Audit successful'.value: 1.type: 'success' },
  { label: 'Audit failed'.value: 2.type: 'danger' },
  // Add cancel state
  { label: 'Audit cancelled'.value: 3.type: 'warning'}]export {
  statusOptions
}
Copy the code

Thank you

This is the end of the sharing, thank you for reading, if this article is helpful to you, don’t forget to move to give a thumbs up ❤️.

If there are any mistakes or deficiencies in this article, welcome to comment section correction, exchange.

A recent article

Native Components introduces you to Web Components

How to gracefully clear a timer in Vue?

Petite Vue is a great new experience

A list of ElementUI issues