elementUI實(shí)現(xiàn)級聯(lián)選擇器
更新時間：2021年11月09日 11:45:57 作者：倉央1143
這篇文章主要為大家詳細(xì)介紹了elementUI實(shí)現(xiàn)級聯(lián)選擇器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了elementUI實(shí)現(xiàn)級聯(lián)選擇器的具體代碼，供大家參考，具體內(nèi)容如下
1、從后端調(diào)用接口，傳遞數(shù)據(jù)到前端
2、使用VUE代碼顯示級聯(lián)選項(xiàng)
<el-cascader
:disabled="isDisabled"
:props="defaultParams"
:options="options"
v-model="selectedOptions"
:show-all-levels="false"
filterable
:clearable="true"
></el-cascader>
3、定義JS
data() {
options: [],
selectedOptions: [],
defaultParams: {
label: "name",
value: "code",
children: "children",
},
}，
created() {
listArea(330000).then((response) => {
console.log(response);
this.options = this.getTreeData(response);
this.loading = false;
});
},
methods: {
// 遞歸消除空數(shù)組
getTreeData(data) {
// 循環(huán)遍歷json數(shù)據(jù)
for (var i = 0; i < data.length; i++) {
if (data[i].children.length < 1) {
// children若為空數(shù)組，則將children設(shè)為undefined
data[i].children = undefined;
} else {
// children若不為空數(shù)組，則繼續(xù) 遞歸調(diào)用 本方法
this.getTreeData(data[i].children);
}
}
return data;
}
}
4、顯示效果如下
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue+Element UI實(shí)現(xiàn)下拉菜單的封裝
這篇文章主要為大家詳細(xì)介紹了Vue+Element UI實(shí)現(xiàn)下拉菜單的封裝代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
解決Vue項(xiàng)目中Emitted value instead of an
這篇文章主要介紹了解決Vue項(xiàng)目中Emitted value instead of an instance of Error問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了Vue之Computed依賴收集與更新原理分析,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
better scroll可以實(shí)現(xiàn)輪播圖和頁面滾動，是移動端滾動插件，這篇文章主要介紹了vue better scroll 無法滾動的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
vue項(xiàng)目如何實(shí)現(xiàn)Echarts在label中獲取點(diǎn)擊事件
這篇文章主要介紹了vue項(xiàng)目如何實(shí)現(xiàn)Echarts在label中獲取點(diǎn)擊事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
關(guān)于前端報“應(yīng)為聲明或語句。ts(1128)“的原因及解決方案
最近在學(xué)習(xí)中遇到了個不常見的報錯,這里給大家總結(jié)下解決的辦法,這篇文章主要給大家介紹了關(guān)于前端報“應(yīng)為聲明或語句,ts(1128)“的原因及解決方案,需要的朋友可以參考下2024-08-08
本文詳細(xì)講解了vue3獲取當(dāng)前路由地址的方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-01-01
這篇文章主要介紹了詳解vuex commit保存數(shù)據(jù)技巧，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了Vue使用axios引起的后臺session不同操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家介紹了實(shí)時通信Socket?io的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11