SoFunction
Updated on 2025-04-05

Example of method of elegant writing status tags in Vue background

Preface

In background system development, for lists, there are often some status fields displayed, such as review status, return application status, etc., and they are often accompanied by status filtering list query conditions, and the status display corresponds to different colors. Some people often do this when writing code:

<template>
  <el-form :model="query">
    <el-form-item label="Approval Status" prop="status">
      <el-select v-model="" clearable>
        <el-option
          v-for="item in statusOptions"
          :key=""
          :label=""
          :value=""
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary">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=" === 0" type="primary">Under review</el-tag>
        <el-tag v-if=" === 1" type="success">Successful review</el-tag>
        <el-tag v-if=" === 2" type="danger">Review failed</el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

export default {
  data() {
    return {
      query: {
          status: null
      },
      statusOptions: [
          { label: 'Additional', value: 0 },
          { label: 'Audit successful', value: 1 },
          { label: 'Audit failed', value: 2 }
      ],
      list: []
    }
  }
}

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

  • The tag is filled with more v-ifs and is duplicated with the data in data, causing redundancy.
  • When there are new additions or modifications, multiple places need to be changed, such as when changing the copy, the drop-down box and the table must be changed.
  • If multiple pages have this status that needs to be displayed, copy and paste, and finally, the cost of change will inevitably increase when the demand changes.

optimization

In response to the above problems, we will use the following measures to rescue them.

Extract variables

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

// const/
// Review statusconst statusOptions = [
  { label: 'Additional', value: 0, type: 'primary' },
  { label: 'Audit successful', value: 1, type: 'success' },
  { label: 'Audit failed', value: 2, type: 'danger' }
]

export {
  statusOptions
}

Secondary encapsulation el-tag component

// components/
<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 = (e =>  === status)
        return (item && item[key]) || ''
      }
    }
  }
}

use

&lt;template&gt;
  &lt;el-form :model="query"&gt;
    &lt;el-form-item label="Approval Status" prop="status"&gt;
      &lt;el-select v-model="" clearable&gt;
        &lt;el-option
          v-for="item in statusOptions"
          :key=""
          :label=""
          :value=""
        /&gt;
      &lt;/el-select&gt;
    &lt;/el-form-item&gt;
    &lt;el-form-item&gt;
      &lt;el-button type="primary"&gt;Query&lt;/el-button&gt;
      &lt;el-button type="danger"&gt;Reset&lt;/el-button&gt;
    &lt;/el-form-item&gt;
  &lt;/el-form&gt;
  &lt;el-table :data="list"&gt;
    &lt;el-table-column label="Approval Status"&gt;
      &lt;template #default="{ row }"&gt;
        &lt;!-- use --&gt;
        &lt;status-tag 
          :options="statusOptions"
          :status=""
        /&gt;
      &lt;/template&gt;
    &lt;/el-table-column&gt;
  &lt;/el-table&gt;
&lt;/template&gt;

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

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

After optimization, if there is any modification, you only need to change the const/ file, without repairing it everywhere.

// const/
// Review statusconst statusOptions = [
  { label: 'Additional', value: 0, type: 'primary' },
  { label: 'Audit successful', value: 1, type: 'success' },
  { label: 'Audit failed', value: 2, type: 'danger' },
  // Add cancel status  { label: 'Audit canceled', value: 3, type: 'warning' }
]

export {
  statusOptions
}

Summarize

This is the article about the elegant writing status tag in Vue background. For more related contents of Vue writing status tags, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!