1.后臺接口為點擊加載下一級 ，傳省市區(qū)id

<template><el-cascaderv-model="selectedOptions"placeholder="請選擇省市區(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:一級 4:二級 6:三級} else if (val.length === 2) {idArea = val[1]sizeArea = val.length // 3:一級 4:二級 6:三級 }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) { // 初始化 加載一級 省this.cascaderData = Items.map((value, i) => {return {id: value.id,name: value.name,cities: []}})} else if (sizeArea === 1) { // 點擊一級 加載二級 市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) { // 點擊二級 加載三級 區(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

總結

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

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