vue+element的 el-cascader进行省市区县选择三级四级联动

根据点击节点调用接口进行三级或者四级联动、

//prop进行自定义的value和label以及children
<el-cascader v-model="value"  @active-item-change="handleItemChange" 
    :props="{ value: 'code',label: 'name',children: 'children'}" :options="options" @change="handleChange"></el-cascader>

//先获取省的接口
handlePro(){
	let that = this
	axios.post(url, {}).then(response => {
         that.options = response.data.data
         this.options.forEach((item, index) => {
             this.$set(this.options[index], 'children', [])
         })
     }).catch(error => {})
}


//active-item-change点击节点触发
handleItemChange(val) {
	 let that = this
	 if (val.length <= 0) return;
	 let provinceList = this.options;
	 let provinceLength = provinceList.length;
	 let provinceAreaId = val[0];
	 if (val.length === 1) {  //市
	     axios.post(url, {}).then(response => {
            for (let i = 0; i < provinceLength; i++) {
                if (provinceList[i].code === provinceAreaId) {
                    this.$set(provinceList[i], 'children', response.data.data);
                    provinceList[i].children.forEach((item, index) => {
                        this.$set(provinceList[i].children[index], 'children', [])
                    })
                    break;
                }
            }
        })
        .catch(error => {})
	 }
	 var cityId = val[1];
	 if (val.length === 2) { // 市areaId,获取市下面所有的区
	     axios.post(url).then(response => {
             for (let i = 0; i < provinceLength; i++) {
                 if (this.options[i].code === provinceAreaId) {
                     let findProvince = this.options[i];
                     let cityList = findProvince.children;
                     let cityLength = cityList.length;
                     for (let j = 0; j < cityLength; j++) {
                         if (cityList[j].code === cityId) {
                             this.$set(cityList[j], 'children', response.data.data);
                             cityList[j].children.forEach((item, index) => {
                                 this.$set(cityList[i].children[index], 'children', [])
                             })
                             break;
                         }
                     }
                     break;
                 }
             }
         })
	 }
	 var  xianId = val[2]; 
	 if (val.length === 3) {  // 县
	     axios.post(url).then(response => {
             for (let i = 0; i < provinceLength; i++) {
                 if (this.options[i].code === provinceAreaId) {
                     let findProvince = this.options[i];
                     let cityList = findProvince.children;
                     let cityLength = cityList.length;
                     for (let j = 0; j < cityLength; j++) {
                         console.log(cityId,cityList[j].code)
                         if (cityList[j].code === cityId) {
                             var xianlist=cityList[j].children
                             xianlist.forEach((item, index) => {
                                 this.$set(xianlist[index], 'children', response.data.data);
                             })
                         }
                     }
                     break;
                 }
             }
         })
  }
},

本文地址：https://blog.csdn.net/weixin_44168929/article/details/108807627