Vue 級聯下拉框的設計與實現
阿新 • • 發佈：2021-07-19
目錄
- 1.設計
- 2.前端頁面
- 3.一個完整的demo
在前端開發中，級聯選擇框是經常用到的，這樣不僅可以增加使用者輸入的友好性，還能減少前後端互動的資料量。本文以elementUI為例，使用其餘UI元件大致思想也都相同。
1.資料庫設計
所有的相關資料皆可存在一張表中，這樣資料就可以不受層級的限制。
表結構可以參考如下建表SQL：
CREATE TABLE `supplies_type` ( `id` int(11) NOT NULL AUTO_INCREMENT,`category_type` varchar(64) NOT NULL COMMENT '類別種類：大類、中類、小類',`big_category_name` varchar(64) NOT NULL COMMENT '大類名稱',`middle_category_name` varchar(64) DEFAULT NULL COMMENT '中類名稱',`small_category_name` varchar(64) DEFAULT NULL COMMENT '小類名稱',`parent_id` int(11) DEFAULT NULL,`create_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP,`create_user_name` varchar(64) DEFAULT NULL COMMENT '建立人使用者名稱',`update_time` timestamp NULL DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP,`is_deleted` tinyint(1) DEFAULT '0' COMMENT '是否刪除，1表示已刪除',PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_Iwww.cppcns.comNCREMENT=1 DEFAULT CHARSET=utf8mb4;
資料庫截圖如下圖所示，注：本系統為了減少查詢次數，故冗餘了一些欄位，讀者可根據自己的需求調整。
核心設計在於parent_id，根據parent_id欄位即可查詢到子類，結果如下圖所示：
2.前端頁面
前端頁面效果如下：
Html程式碼如下：
<div class="app-container">
<span style="margin-left:120px;margin-right: 20px;width: 150px;display: inline-block;">大類：</span>
<el-select v-model="big" placeholder="請選擇" @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;">中類：</span>
<el-select v-model="middle" placeholder="請選擇" @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;">小類：</span>
<el-select v-mjQVOTd
上面的item.smallCategoryName、item.smallCategoryName資料為後端從資料庫中查詢出來的資料（駝峰命名），後端只負責查詢、並返回結果。
中資料定義如下：
data() {
return {
big: '',bigTypes: null,middle: '',middleTypes: null,small: '',smallTypes: null
}
},
在頁面初始化時，自動獲取大類列表：
created() {
this.getSuppliesType(0)
},
頁面中的getSuppliesType方法如下：
getSuppliesType(id) {
this.listLoading = true
const queryData = {
parentId: id
}
//此處的呼叫後端介面按照自己的呼叫方式寫即可
//此處的getSuppliersType是專案中自己封裝的util中的方法
//如果請求方式是post，ON.stringify(queryData)
//如果請求方式是get，queryData
getSuppliersType(JSON.stringify(queryData)).then(response => {
console.log(response)
console.log(response.data[0].categoryType)
//根據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.一個完整的demo
下面這個頁面為完成程式碼，其中的資料為部分資料，後臺介面獲取使用JS來完成。
<template>
<div class="app-container">
<span style="margin-left:120px;margin-right: 20px;width: 150px;display: inline-block;">大類：</span>
<el-select v-model="big" placeholder="請選擇" @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;">中類：</span>
<el-select v-model="middle" placeholder="請選擇" @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;">小類：</span>
<el-select v-model="small" placeholder="請選擇" 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">新增</el-button>
<el-button type="primary" round style="margin-left:100px" @click.native.prevent="cancel">取消</el-button>
</div>
</template>
<script>
export default {
filters: {
parseTime(timestamp) {
return parseTime(timestamp,null)
}
},data() {
return {
big: '',smallTypes: null,dataList: [
{"id":1,"categoryType":"BIG","bigCategoryName":"1.現場管理與保障","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,"bigCategoryName":"2.生命救援與生活救助","updateTime":null,{"id":2,"categoryType":"MIDDLE","middleCategoryName":"1.1現場監測","parentId":1,{"id":10,"middleCategoryName":"1.2現場安全",{"id":3,"categoryType":"SMALL","smallCategoryName":"1.1.1氣象監測","parentId":2,{"id":4,"smallCategoryName":"1.1.2地震監測",{"id":5,"smallCategoryName":"1.1.3地質災害監測",{"id":6,"smallCategoryName":"1.1.4水文監測",{"id":7,"smallCategoryName":"1.1.5環境監測",{"id":8,"smallCategoryName":"1.1.6疫病監測",{"id":9,"smallCategoryName":"1.1.7觀察測量",{"id":11,"smallCategoryName":"1.2.1現場照明","parentId":10,{"id":12,"smallCategoryName":"1.2.2現場警戒","createUserName":null,{"id":28,"middleCategoryName":"2.1人員安全防護","parentId":27,{"id":34,"middleCategoryName":"2.2生命搜救與營救","updateTime":"2021-07-04T13:03:23.000+0000",{"id":29,"smallCategoryName":"2.1.1衛生防疫","parentId":28,{"id":30,"smallCategoryName":"2.1.2消防防護",{"id":31,"smallCategoryName":"2.1.3化學與放射",{"id":32,"smallCategoryName":"2.1.4防高空墜落",{"id":33,"smallCategoryName":"2.1.5通用防護",{"id":35,"smallCategoryName":"2.2.1生命搜尋","parentId":34,{"id":36,"smallCategoryName":"2.2.2攀巖營救",{"id":37,"smallCategoryName":"2.2.3破拆起重",{"id":38,"smallCategoryName":"2.2.4水下營救",{"id":39,"smallCategoryName":"2.2.5通用工具","isDeleted":false}
]
}
},created() {
this.getSuppliesType(0)
},methods: {
getSuppliesType(id) {
const queryData = {
parentId: id
}
//此處為js模擬，真實資料的獲取還需要後臺介面的支援
getSuppliersType(JSON.stringify(queryData)).then(response => {
console.log(response)
console.log(response.data[0].categoryType)
//存放此次查詢結果
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("點選了提交按鈕")
},cancel() {
this.$router.go(-1)
}
}
}
</script>
又到了分隔線以下，本文到此就結束了，本文內容全部都是由博主自己進行整理並結合自身的理解進行總結
到此這篇關於Vue 級聯下拉框的設計與實現的文章就介紹到這了,更多相關Vue 級聯下拉框 內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！