elementUI實現(xiàn)級聯(lián)選擇器
更新時間：2021年11月09日 11:45:57 作者：倉央1143
這篇文章主要為大家詳細介紹了elementUI實現(xiàn)級聯(lián)選擇器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了elementUI實現(xiàn)級聯(lián)選擇器的具體代碼，供大家參考，具體內(nèi)容如下
1、從后端調(diào)用接口，傳遞數(shù)據(jù)到前端
2、使用VUE代碼顯示級聯(lián)選項
<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)文章
本文主要介紹了el-table嵌套el-popover處理卡頓的解決，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
這篇文章主要介紹了vant的picker組件設(shè)置文字超長滾動方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
在日常開發(fā)過程中,為了減少最后打包出來的體積,我們會用到cdn引入一些比較大的庫來解決,下面這篇文章主要給大家介紹了關(guān)于vue項目使用CDN引入的配置與易出錯點的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了在vue中使用image-webpack-loader實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue 將多個過濾器封裝到一個文件中實現(xiàn)方法，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2020-09-09
vue使用jsencrypt實現(xiàn)rsa前端加密的操作代碼
這篇文章主要介紹了vue使用jsencrypt實現(xiàn)rsa前端加密,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
這篇文章主要為大家介紹了vue的Des加密解密使用實例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
Vue報錯:Injection?"xxxx"?not?found的解決辦法
這篇文章主要給大家介紹了關(guān)于Vue報錯:Injection?"xxxx"?not?found的解決辦法,文中通過圖文將解決的辦法介紹的非常詳細,對大家的學(xué)習(xí)具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
vue是一套用于構(gòu)建用戶界面的漸進式框架，本文通過實例給大家介紹了vue入門教程適用小白初學(xué)者，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-04-04
Vue的生命周期就是vue實例從創(chuàng)建到銷毀的全過程,也就是new Vue()開始就是vue生命周期的開始。Vue實例有?個完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom->渲染、更新->渲染、卸載等?系列過程,稱這是Vue的?命周期2022-10-10