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
MySQL 5.7.23 installation and configuration graphic tutorial
This article records the detailed installation pr...
Mysql error: Too many connections solution
MySQL database too many connections This error ob...
Example of how to change the domestic source in Ubuntu 18.04
Ubuntu's own source is from China, so the dow...
Use of JavaScript sleep function
Table of contents 1.sleep function 2. setTimeout ...
Detailed explanation of process management in Linux system
Table of contents 1. The concept of process and t...
Simple operation of installing vi command in docker container
When using a docker container, sometimes vim is n...
Solution to the problem that Docker container cannot access Jupyter
In this project, the Docker container is used to ...
JavaScript clicks the button to generate a 4-digit random verification code
This article example shares the specific code of ...
Docker win ping fails container avoidance guide
Using win docker-desktop, I want to connect to co...
Two methods to implement MySQL group counting and range aggregation
The first one: normal operation SELECT SUM(ddd) A...
Solve the problem that some configuration files in /etc are reset after the docker container is restarted
1. The three files /etc/hosts, /etc/resolv.conf a...
Linux swap partition (detailed explanation)
Table of contents linux 1. What is SWAP 2. What d...
Detailed explanation of the concepts, principles and common usage of MySQL stored procedures
This article uses examples to explain the concept...
Detailed explanation of the alternative implementation code of CSS vertical centering (unconventional)
Preface As we all know, "How to vertically c...
Analyzing the MySql CURRENT_TIMESTAMP function by example
When creating a time field DEFAULT CURRENT_TIMEST...