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
Pure CSS free implementation code for websites to have dark mode switching function
Preface The concept of dark mode originated from ...
Virtual Box tutorial diagram of duplicating virtual machines
After getting used to VM, switching to BOX is a l...
JavaScript custom plug-in to implement tab switching function
This article shares the specific code of JavaScri...
Linux general java program startup script code example
Although the frequency of starting the shell is v...
Web page CSS priority is explained in detail for you
Before talking about CSS priority, we need to und...
Detailed summary of web form submission methods
Let's first look at several ways to submit a ...
Summary of the knowledge of embedding instructions that Vue engineers must encapsulate
Table of contents Preface Instruction Basics Hook...
How to load the camera in HTML
Effect diagram: Overall effect: Video loading: Ph...
How to install phabricator using Docker
I am using the Ubuntu 16.04 system here. Installa...
Vue3 encapsulates the magnifying glass effect component of Jingdong product details page
This article shares the specific code of vue3 enc...
Implementation of pushing Docker images to Docker Hub
After the image is built successfully, it can be ...
Nginx try_files directive usage examples
Nginx's configuration syntax is flexible and ...
Linux series of commonly used operation and maintenance commands (summary)
Table of contents 1. System monitoring 2. File Op...
Analysis of MySQL user management operation examples
This article describes the MySQL user management ...
mysql creates root users and ordinary users and modify and delete functions
Method 1: Use the SET PASSWORD command mysql -u r...