An example of elegantly writing status labels in Vue background

Preface
optimization

Extract variables
Secondary packaging el-tag components
use

Summarize

Preface

In the development of backend systems, there are often some status fields displayed for lists, such as review status, return application status, etc., and they are often accompanied by list query conditions for status filtering. At the same time, the status display corresponds to different colors. When writing code, some people often do this:

<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">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">Under review</el-tag>
        <el-tag v-if="row.status === 1" type="success">Review successful</el-tag>
        <el-tag v-if="row.status === 2" type="danger">Audit failed</el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

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

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

The tag is filled with too many v-ifs and the data in data is repeated, causing redundancy.
When there are additions or modifications, multiple places need to be changed. For example, when changing the text, both the drop-down box and the table need to be changed.
If multiple pages have this status that needs to be displayed, copying and pasting will inevitably increase the cost of modification when the requirements change.

optimization

In response to the above problems, we will take 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 and display different colors, and finally export it.

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

export {
  statusOptions
}

Secondary packaging el-tag components

// 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]) || ''
      }
    }
  }
}

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">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 }">
        <!-- Usage -->
        <status-tag 
          :options="statusOptions"
          :status="row.status"
        />
      </template>
    </el-table-column>
  </el-table>
</template>

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

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

After optimization, if there are any changes, you only need to change the const/index.js file, without having to modify it everywhere.

// const/index.js
// Audit status const statusOptions = [
  { label: 'Under review', value: 0, type: 'primary' },
  { label: 'Review successful', value: 1, type: 'success' },
  { label: 'Audit failure', value: 2, type: 'danger' },
  // Add cancellation status { label: 'Review canceled', value: 3, type: 'warning' }
]

export {
  statusOptions
}

Summarize

This is the end of this article about the elegant writing status label in the Vue background. For more relevant Vue writing status label content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

<<: The process of SSH service based on key authentication in Linux system

>>: The MySQL version is lower than the one that does not support two timestamp type values.