Design and implementation of Vue cascading drop-down box
|
In front-end development, cascading selection boxes are often used, which not only increases the friendliness of user input, but also reduces the amount of data interacting between the front-end and back-end. This article takes elementUI as an example, and the general idea of using other UI components is the same. 1. Database designAll related data can be stored in one table, so that the data is not restricted by hierarchy. The table structure can refer to the following table creation SQL: CREATE TABLE `supplies_type` ( `id` int(11) NOT NULL AUTO_INCREMENT, `category_type` varchar(64) NOT NULL COMMENT 'Category type: large category, medium category, small category', `big_category_name` varchar(64) NOT NULL COMMENT 'Big category name', `middle_category_name` varchar(64) DEFAULT NULL COMMENT 'Middle category name', `small_category_name` varchar(64) DEFAULT NULL COMMENT 'Small category name', `parent_id` int(11) DEFAULT NULL, `create_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP, `create_user_name` varchar(64) DEFAULT NULL COMMENT 'Create user name', `update_time` timestamp NULL DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP, `is_deleted` tinyint(1) DEFAULT '0' COMMENT 'Whether it is deleted, 1 means it is deleted', PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4; The database screenshot is shown in the figure below. Note: In order to reduce the number of queries, this system has redundant fields. Readers can adjust them according to their needs.
The core design lies in parent_id. Subclasses can be queried based on the parent_id field. The result is shown in the following figure:
2. Front-end pageThe front-end page effect is as follows:
The Html code is as follows:
<div class="app-container">
<span style="margin-left:120px;margin-right: 20px;width: 150px;display: inline-block;">Major categories:</span>
<el-select v-model="big" placeholder="Please select" @change="getSuppliesType(big)" style="width: 19%;">
<el-option
v-for="item in bigTypes"
:key="item.bigCategoryName"
:label="item.bigCategoryName"
:value="item.id">
</el-option>
</el-select>
<span style="margin-left:120px;margin-right: 20px; width: 150px;display: inline-block;">Medium category:</span>
<el-select v-model="middle" placeholder="Please select" @change="getSuppliesType(middle)" style="width: 19%;">
<el-option
v-for="item in middleTypes"
:key="item.middleCategoryName"
:label="item.middleCategoryName"
:value="item.id">
</el-option>
</el-select>
<br>
<br>
<br>
<span style="margin-left:120px;margin-right: 20px;width: 150px; margin-top:20px; display: inline-block;">Subcategory:</span>
<el-select v-model="small" placeholder="Please select" style="width: 19%;">
<el-option
v-for="item in smallTypes"
:key="item.smallCategoryName"
:label="item.smallCategoryName"
:value="item.id">
</el-option>
</el-select>
</div>
The item.smallCategoryName and item.smallCategoryName data above are the data (camel case naming) queried from the database by the backend. The backend is only responsible for querying and returning the results. The data definition in Vue is as follows:
data() {
return {
big: '',
bigTypes: null,
middle: '',
middleTypes: null,
small: '',
smallTypes: null
}
},
When the page is initialized, the category list is automatically obtained:
created() {
this.getSuppliesType(0)
},The getSuppliesType method in the page is as follows:
getSuppliesType(id) {
this.listLoading = true
const queryData = {
parentId: id
}
//The backend interface call here can be written according to your own calling method //The getSuppliersType here is the method in the util encapsulated in the project //If the request method is post, JSON.stringify(queryData)
//If the request method is get, queryData
getSuppliersType(JSON.stringify(queryData)).then(response => {
console.log(response)
console.log(response.data[0].categoryType)
//Automatically assign values to the three drop-down boxes according to type if (response.data[0].categoryType === 'BIG') {
this.bigTypes = response.data
} else if (response.data[0].categoryType === 'MIDDLE') {
this.middleTypes = response.data
} else {
this.smallTypes = response.data
}
this.listLoading = false
}).catch(function (error) {
console.log(error)
this.listLoading = false
})
},
3. A complete demoThe following page is the completed code. The data in it is partial data, and the background interface is obtained using JS.
<template>
<div class="app-container">
<span style="margin-left:120px;margin-right: 20px;width: 150px;display: inline-block;">Major categories:</span>
<el-select v-model="big" placeholder="Please select" @change="getSuppliesType(big)" style="width: 19%;">
<el-option
v-for="item in bigTypes"
:key="item.bigCategoryName"
:label="item.bigCategoryName"
:value="item.id">
</el-option>
</el-select>
<span style="margin-left:120px;margin-right: 20px; width: 150px;display: inline-block;">Medium category:</span>
<el-select v-model="middle" placeholder="Please select" @change="getSuppliesType(middle)" style="width: 19%;">
<el-option
v-for="item in middleTypes"
:key="item.middleCategoryName"
:label="item.middleCategoryName"
:value="item.id">
</el-option>
</el-select>
<br>
<br>
<br>
<span style="margin-left:120px;margin-right: 20px;width: 150px; margin-top:20px; display: inline-block;">Subcategory:</span>
<el-select v-model="small" placeholder="Please select" style="width: 19%;">
<el-option
v-for="item in smallTypes"
:key="item.smallCategoryName"
:label="item.smallCategoryName"
:value="item.id">
</el-option>
</el-select>
<br>
<br>
<br>
<el-button type="primary" round style="margin-left:280px" @click.native.prevent="commit">Add</el-button>
<el-button type="primary" round style="margin-left:100px" @click.native.prevent="cancel">Cancel</el-button>
</div>
</template>
<script>
export default {
filters:
parseTime(timestamp) {
return parseTime(timestamp, null)
}
},
data() {
return {
big: '',
bigTypes: null,
middle: '',
middleTypes: null,
small: '',
smallTypes: null,
dataList: [
{"id":1,"categoryType":"BIG","bigCategoryName":"1. Site Management and Security","middleCategoryName":null,"smallCategoryName":null,"parentId":0,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":"2021-07-04T13:34:31.000+0000","isDeleted":false},
{"id":27,"categoryType":"BIG","bigCategoryName":"2. Life Rescue and Living Assistance","middleCategoryName":null,"smallCategoryName":null,"parentId":0,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
{"id":2,"categoryType":"MIDDLE","bigCategoryName":"1. Site Management and Security","middleCategoryName":"1.1 Site Monitoring","smallCategoryName":null,"parentId":1,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
{"id":10,"categoryType":"MIDDLE","bigCategoryName":"1. Site Management and Security","middleCategoryName":"1.2 Site Safety","smallCategoryName":null,"parentId":1,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
{"id":3,"categoryType":"SMALL","bigCategoryName":"1. Site Management and Security","middleCategoryName":"1.1 Site Monitoring","smallCategoryName":"1.1.1 Meteorological Monitoring","parentId":2,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
{"id":4,"categoryType":"SMALL","bigCategoryName":"1. Site Management and Security","middleCategoryName":"1.1 Site Monitoring","smallCategoryName":"1.1.2 Earthquake Monitoring","parentId":2,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
{"id":5,"categoryType":"SMALL","bigCategoryName":"1. Site Management and Security","middleCategoryName":"1.1 Site Monitoring","smallCategoryName":"1.1.3 Geological Hazard Monitoring","parentId":2,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
{"id":6,"categoryType":"SMALL","bigCategoryName":"1. Site Management and Security","middleCategoryName":"1.1 Site Monitoring","smallCategoryName":"1.1.4 Hydrological Monitoring","parentId":2,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
{"id":7,"categoryType":"SMALL","bigCategoryName":"1. Site Management and Security","middleCategoryName":"1.1 Site Monitoring","smallCategoryName":"1.1.5 Environmental Monitoring","parentId":2,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
{"id":8,"categoryType":"SMALL","bigCategoryName":"1. On-site management and guarantee","middleCategoryName":"1.1 On-site monitoring","smallCategoryName":"1.1.6 Disease monitoring","parentId":2,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
{"id":9,"categoryType":"SMALL","bigCategoryName":"1. Site Management and Security","middleCategoryName":"1.1 Site Monitoring","smallCategoryName":"1.1.7 Observation and Measurement","parentId":2,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
{"id":11,"categoryType":"SMALL","bigCategoryName":"1. Site Management and Security","middleCategoryName":"1.2 Site Safety","smallCategoryName":"1.2.1 Site Lighting","parentId":10,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
{"id":12,"categoryType":"SMALL","bigCategoryName":"1. Site Management and Security","middleCategoryName":"1.2 Site Safety","smallCategoryName":"1.2.2 Site Alert","parentId":10,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
{"id":28,"categoryType":"MIDDLE","bigCategoryName":"2. Life Rescue and Living Assistance","middleCategoryName":"2.1 Personnel Safety Protection","smallCategoryName":null,"parentId":27,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
{"id":34,"categoryType":"MIDDLE","bigCategoryName":"2. Life rescue and life assistance","middleCategoryName":"2.2 Life search and rescue","smallCategoryName":null,"parentId":27,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":"2021-07-04T13:03:23.000+0000","isDeleted":false},
{"id":29,"categoryType":"SMALL","bigCategoryName":"2. Life Rescue and Living Assistance","middleCategoryName":"2.1 Personnel Safety Protection","smallCategoryName":"2.1.1 Health and Epidemic Prevention","parentId":28,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
{"id":30,"categoryType":"SMALL","bigCategoryName":"2. Life Rescue and Living Assistance","middleCategoryName":"2.1 Personnel Safety Protection","smallCategoryName":"2.1.2 Fire Protection","parentId":28,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
{"id":31,"categoryType":"SMALL","bigCategoryName":"2. Life Rescue and Living Assistance","middleCategoryName":"2.1 Personnel Safety Protection","smallCategoryName":"2.1.3 Chemistry and Radiation","parentId":28,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
{"id":32,"categoryType":"SMALL","bigCategoryName":"2. Life Rescue and Living Assistance","middleCategoryName":"2.1 Personnel Safety Protection","smallCategoryName":"2.1.4 Fall Prevention","parentId":28,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
{"id":33,"categoryType":"SMALL","bigCategoryName":"2. Life Rescue and Living Assistance","middleCategoryName":"2.1 Personnel Safety Protection","smallCategoryName":"2.1.5 General Protection","parentId":28,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
{"id":35,"categoryType":"SMALL","bigCategoryName":"2. Life rescue and life assistance","middleCategoryName":"2.2 Life search and rescue","smallCategoryName":"2.2.1 Life search","parentId":34,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
{"id":36,"categoryType":"SMALL","bigCategoryName":"2. Life Rescue and Life Assistance","middleCategoryName":"2.2 Life Search and Rescue","smallCategoryName":"2.2.2 Rock Climbing Rescue","parentId":34,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
{"id":37,"categoryType":"SMALL","bigCategoryName":"2. Life rescue and life assistance","middleCategoryName":"2.2 Life search and rescue","smallCategoryName":"2.2.3 Demolition and lifting","parentId":34,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
{"id":38,"categoryType":"SMALL","bigCategoryName":"2. Life rescue and life assistance","middleCategoryName":"2.2 Life search and rescue","smallCategoryName":"2.2.4 Underwater rescue","parentId":34,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
{"id":39,"categoryType":"SMALL","bigCategoryName":"2. Life rescue and life assistance","middleCategoryName":"2.2 Life search and rescue","smallCategoryName":"2.2.5 General tools","parentId":34,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false}
]
}
},
created() {
this.getSuppliesType(0)
},
methods: {
getSuppliesType(id) {
const queryData = {
parentId: id
}
//This is a js simulation. The acquisition of real data also requires the support of the backend interface getSuppliersType(JSON.stringify(queryData)).then(response => {
console.log(response)
console.log(response.data[0].categoryType)
//Store the query results let tmpList = []
this.dataList.forEach((item, index) => {
if(item.parentId === id){
tmpList.push(item)
}
})
if (tmpList[0].categoryType === 'BIG') {
this.bigTypes = tmpList
} else if (response.data[0].categoryType === 'MIDDLE') {
this.middleTypes = tmpList
} else {
this.smallTypes = tmpList
}
}).catch(function (error) {
console.log(error)
})
},
commit() {
console.log("Submit button clicked")
},
cancel() {
this.$router.go(-1)
}
}
}
</script>
It's below the dividing line again, and this article ends here. The content of this article is all sorted out by the blogger himself and summarized in combination with his own understanding This is the end of this article about the design and implementation of the Vue cascading drop-down box. For more relevant Vue cascading drop-down box content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Installation and use of Ubuntu 18.04 Server version (picture and text)
>>: Detailed explanation of the concepts, principles and common usage of MySQL stored procedures
Recommend
Linux Samba server super detailed installation and configuration (with problem solving)
Table of contents Introduction to Samba Server Sa...
Detailed explanation of the 14 common HTTP status codes returned by the server
HTTP Status Codes The status code is composed of ...
URL Rewrite Module 2.1 URL Rewrite Module Rule Writing
Table of contents Prerequisites Setting up a test...
Comprehensive understanding of HTML basic structure
Introduction to HTML HyperText Markup Language: H...
MySQL practical skills: analysis of methods to compare whether two tables have different data
This article uses an example to describe how MySQ...
Vue must learn knowledge points: the use of forEach()
Preface In front-end development, we often encoun...
How to add vim implementation code examples in power shell
1. Go to Vim's official website to download t...
Docker deploys net5 program to achieve cross-platform functions
Deployment environment: docker container, liunx s...
Vue uses openlayers to load Tiandi Map and Amap
Table of contents 1. World Map 1. Install openlay...
Win10 configuration tomcat environment variables tutorial diagram
Before configuration, we need to do the following...
Detailed explanation of the minimum width value of inline-block in CSS
Preface Recently, I have been taking some time in...
How to solve the element movement caused by hover-generated border
Preface Sometimes when hover pseudo-class adds a ...
Ideas for creating wave effects with CSS
Previously, I introduced several ways to achieve ...
CentOS 8 officially released based on Red Hat Enterprise Linux 8
The CentOS Project, a 100% compatible rebuild of ...
Solution to the failure of MySQL to use innobackupex to backup the connection server
What should I do if MySQL fails to connect to the...