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