Design and implementation of Vue cascading drop-down box

1. Database design
2. Front-end page
3. A complete demo

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 design

All 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.

insert image description here

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:

insert image description here

2. Front-end page

The front-end page effect is as follows:

insert image description here

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 demo

The 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: