An example of elegantly writing status labels in Vue background
PrefaceIn 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:
optimizationIn response to the above problems, we will take the following measures to rescue them. Extract variablesCreate 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
}
SummarizeThis 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
MySQL FAQ series: How to avoid a sudden increase in the size of the ibdata1 file
0. Introduction What is the ibdata1 file? ibdata1...
MySQL 5.7.18 installation and configuration tutorial under Windows
This article shares the installation and configur...
Summary of Mysql update multi-table joint update method
Next, I will create two tables and execute a seri...
How to use the name attribute and id attribute of the a tag to jump within the page
In the past, I only knew how to use the name attri...
Echarts legend component properties and source code
The legend component is a commonly used component...
How to start the spring-boot project using the built-in linux system in win10
1. Install the built-in Linux subsystem of win10 ...
How to install docker and portainer in kali
With the emergence of docker, many services have ...
Learn MySQL in a simple way
Preface The database has always been my weak poin...
Html+CSS floating advertisement strip implementation
1.html part Copy code The code is as follows: <...
uni-app implements NFC reading function
This article shares the specific code of uni-app ...
Alibaba Cloud domain name and IP binding steps and methods
1 Enter the Alibaba Cloud console, find the domai...
Tutorial on installing nginx in Linux environment
Table of contents 1. Install the required environ...
52 SQL statements to teach you performance optimization
1. To optimize the query, try to avoid full table...
How to recover accidentally deleted messages files in Linux
If there are files that are being used by a proce...
Ubuntu 16.04 image complete installation tutorial under VMware
This article shares with you the installation tut...