Vue級聯(lián)下拉框怎么實(shí)現(xiàn)
今天小編給大家分享一下Vue級聯(lián)下拉框怎么實(shí)現(xiàn)的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
創(chuàng)新互聯(lián)是一家專業(yè)的成都網(wǎng)站建設(shè)公司，我們專注成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、外貿(mào)營銷網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷、企業(yè)網(wǎng)站建設(shè)，買友情鏈接，廣告投放為企業(yè)客戶提供一站式建站解決方案，能帶給客戶新的互聯(lián)網(wǎng)理念。從網(wǎng)站結(jié)構(gòu)的規(guī)劃UI設(shè)計到用戶體驗(yàn)提高，創(chuàng)新互聯(lián)力求做到盡善盡美。
1.數(shù)據(jù)庫設(shè)計
所有的相關(guān)數(shù)據(jù)皆可存在一張表中，這樣數(shù)據(jù)就可以不受層級的限制。
表結(jié)構(gòu)可以參考如下建表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 "創(chuàng)建人用戶名",
`update_time` timestamp NULL DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP,
`is_deleted` tinyint(1) DEFAULT "0" COMMENT "是否刪除，1表示已刪除",
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;
數(shù)據(jù)庫截圖如下圖所示，注：本系統(tǒng)為了減少查詢次數(shù)，故冗余了一些字段，讀者可根據(jù)自己的需求調(diào)整。
核心設(shè)計在于parent_id，根據(jù)parent_id字段即可查詢到子類，結(jié)果如下圖所示：
2.前端頁面
前端頁面效果如下：
Html代碼如下：
大類：
中類：
小類：
上面的item.smallCategoryName、item.smallCategoryName數(shù)據(jù)為后端從數(shù)據(jù)庫中查詢出來的數(shù)據(jù)（駝峰命名），后端只負(fù)責(zé)查詢、并返回結(jié)果。
Vue中數(shù)據(jù)定義如下：
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
}
//此處的調(diào)用后端接口按照自己的調(diào)用方式寫即可
//此處的getSuppliersType是項(xiàng)目中自己封裝的util中的方法
//如果請求方式是post，JSON.stringify(queryData)
//如果請求方式是get，queryData
getSuppliersType(JSON.stringify(queryData)).then(response => {
console.log(response)
console.log(response.data[0].categoryType)
//根據(jù)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
下面這個頁面為完成代碼，其中的數(shù)據(jù)為部分?jǐn)?shù)據(jù)，后臺接口獲取使用JS來完成。
大類：
中類：
小類：
添加
取消
以上就是“Vue級聯(lián)下拉框怎么實(shí)現(xiàn)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
當(dāng)前標(biāo)題：Vue級聯(lián)下拉框怎么實(shí)現(xiàn)
本文路徑：
http://weahome.cn/article/popgco.html
重慶分公司
重慶分公司
