An example of elegantly writing status labels in Vue background

An example of elegantly writing status labels in Vue background

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.

Recommend

Problems with using wangeditor rich text editing in Vue

wangEditor is a web rich text editor developed ba...

Setting up Docker proxy under CentOS 7 (environment variable configuration of Systemd service under Linux)

The Docker daemon uses HTTP_PROXY , HTTPS_PROXY ,...

js to achieve the complete steps of Chinese to Pinyin conversion

I used js to create a package for converting Chin...

Summary of the dockerfile-maven-plugin usage guide

Table of contents pom configuration Setting.xml c...

Summary of MySQL composite indexes

Table of contents 1. Background 2. Understanding ...

How to understand semantic HTML structure

I believe everyone knows HTML and CSS, knows the ...

Mini Programs enable product attribute selection or specification selection

This article shares the specific code for impleme...

Sharing tips on using scroll bars in HTML

Today, when we were learning about the Niu Nan new...

MySQL data insertion efficiency comparison

When inserting data, I found that I had never con...

Ubuntu Basic Tutorial: apt-get Command

Preface The apt-get command is a package manageme...

Problems encountered when installing mysql8.0.15 winx64 on Win10 and connecting to the server

1. Download, install and configure mysql-8.0.15 1...

Analyze the problem of Zabbix 5.0 disk automatic discovery and read-write monitoring

Automatically discover disks Configuration Key Va...

5 cool and practical HTML tags and attributes introduction

In fact, this is also a clickbait title, and it c...

A debugging process record of Chinese garbled characters in the Tomcat source code startup console

Find the problem Today I am going to study the to...

Our thoughts on the UI engineer career

I have been depressed for a long time, why? Some t...