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
Implementation of element input box automatically getting focus
When making a form in a recent project, I need to...
Tutorial on using the frameset tag in HTML
Frameset pages are somewhat different from ordina...
Detailed explanation of the use of MySQL paradigm
1. Paradigm The English name of the paradigm is N...
js implements table drag options
This article example shares the specific code of ...
Docker-compose installation db2 database operation
It is troublesome to install the db2 database dir...
What is ssh port forwarding? What's the use?
Table of contents Preface 1. Local port forwardin...
Summary of MySql import and export methods using mysqldump
Export database data: First open cmd and enter th...
CenterOS7 installation and configuration environment jdk1.8 tutorial
1. Uninstall the JDK that comes with centeros fir...
Zabbix configures DingTalk's alarm function with pictures
Implementation ideas: First of all, the alarm inf...
Detailed explanation of the relationship between image format and design in web design
Why do I want to organize the content in this area...
Detailed explanation of Linux server status and performance related commands
Server Status Analysis View Linux server CPU deta...
How to install Windows Server 2008 R2 on Dell R720 server
Note: All pictures in this article are collected ...
How to add java startup command to tomcat service
My first server program I'm currently learnin...
Detailed troubleshooting of docker.service startup errors
Execute the following command to report an error ...
Detailed explanation of Vue form event data binding
<body> <div id="root"> <...