Vue (28) El-cascader dynamic Loading-provincial and regional components

1. Background interface for click to load the next level, the provincial and regional ID

<template> <el-Cascader v-model= "Selectedoptions"placeholder= "Please select the city and province area": Options= "Cascaderdata"@active-item-change= "Handleitemchange":p Rops="{value: ' ID ', Label: ' Name ', Children: ' Cities '}"></el-cascader></template><script>Exportdefault{name:' My-provinces ', data () {return{departmentoptions: [], Cascaderdata: [], Selectedoptions: []}, methods: {Getnodes (val) {Let Idarea let Sizeareaif(!val) {Idarea=NULLSizearea= 0      } Else if(Val.length = = 1) {Idarea= Val[0] Sizearea= Val.length//3: Level 4: Level Two 6: Level three}Else if(Val.length = = 2) {Idarea= Val[1] Sizearea= Val.length//3: Level 4: Level Two 6: Level three      }       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) {//Initialize load first level province             This. Cascaderdata = Items.map ((value, i) = = {              return{id:value.id, name:value.name, cities: []}} )          } Else if(Sizearea = = 1) {//Click on level two to load the city             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) {//Click Level two to load level three zone             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. Effects

Vue (28) El-cascader dynamic Loading-provincial and regional components