1.后臺(tái)接口為點(diǎn)擊加載下一級(jí) ，傳省市區(qū)id

<template><el-cascaderv-model="selectedOptions"placeholder="請(qǐng)選擇省市區(qū)":options="cascaderData"@active-item-change="handleItemChange":props="{value: 'id',label: 'name',children: 'cities'}"></el-cascader> </template><script> export default {name: 'my-provinces',data () {return {departmentOptions: [],cascaderData: [],selectedOptions: []}},methods: {getNodes (val) {let idArealet sizeAreaif (!val) {idArea = nullsizeArea = 0} else if (val.length === 1) {idArea = val[0]sizeArea = val.length // 3:一級(jí) 4:二級(jí) 6:三級(jí)} else if (val.length === 2) {idArea = val[1]sizeArea = val.length // 3:一級(jí) 4:二級(jí) 6:三級(jí) }this.$post('ibest/service/system/area/areaList', {'id': idArea}).then(response => {if (response.data && response.data.code === '00000000') {let Items = response.data.dataif (sizeArea === 0) { // 初始化 加載一級(jí) 省this.cascaderData = Items.map((value, i) => {return {id: value.id,name: value.name,cities: []}})} else if (sizeArea === 1) { // 點(diǎn)擊一級(jí) 加載二級(jí) 市this.cascaderData.map((value, i) => {if (value.id === val[0]) {if (!value.cities.length) {value.cities = Items.map((value, i) => {return {id: value.id,name: value.name,cities: []}})}}})} else if (sizeArea === 2) { // 點(diǎn)擊二級(jí) 加載三級(jí) 區(qū)this.cascaderData.map((value, i) => {if (value.id === val[0]) {value.cities.map((value, i) => {if (value.id === val[1]) {if (!value.cities.length) {value.cities = Items.map((value, i) => {return {id: value.id,name: value.name}})}}})}})}} else {console.log(response.data.msg)}}, error => {console.log(error)})},handleItemChange (val) {this.getNodes(val)}},mounted () {this.getNodes()} } </script>

2.效果

?

轉(zhuǎn)載于:https://www.cnblogs.com/yulingjia/p/9789174.html

總結(jié)

以上是生活随笔為你收集整理的Vue（二十八）el-cascader 动态加载 - 省市区组件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。