Element中Cascader 级联选择器动态获取下级数据

Element中Cascader 级联选择器动态获取下级数据

本文的Cascader所使用的方法是2.4.11版本内的方法。主要想利用该组件实现级联地址选择器。通过请求后台接口动态地请求下级地址中的数据。

首先给与地址最高级的默认数据

利用el-cascader中的active-item-change方法，在点击父级选项时触发指定函数

在实现方法中利用递归的思想

主要代码：

	<el-cascader :props="props" @active-item-change="handleItemChange" :options="defaultOptions"></el-cascader>

data(){
	return {
		defaultOptions: [],
		//指定选项的格式
		 props: {
          value: 'code',
          label: 'name',
        },
       //后台接口请求参数
        addressParams: {
          level: 1,
          code: ''
        }
	}
}

	methods: {
		getAddress() {
	        selectNextAddressByCode(this.addressParams).then(res => {
	          this.defaultOptions = this.handleData(res.data);
	        }).catch(err => {
	        })
	    },
	     handleItemChange(val) {
	        let code = val ? val[val.length - 1] : '';  //需请求数据的上级地址的code值
	        let level = val.length + 1;  //需请求第几级地址
	        this.defaultOptions = this.handleData(this.defaultOptions, code, level);
      	},
      	handleData(data, val, level) {
	        for (let i = 0; i < data.length; i++) {
	          if(!data[i].children) {
	            this.$set(data[i], 'children', []);
	          }
	          if(data[i].code === val){
	            selectNextAddressByCode({level: level, code: val}).then(res => {
	              if(res.data.length) {
	                data[i].children = res.data;
	                data[i].children.forEach(ele => {
	                  this.$set(ele, 'children', [])
	                });
	              }else {
	                data[i].children = undefined;
	              }
	            }).catch(err => {
	            });
	          }else {
	            if(data[i].children.length){
	              this.handleData(data[i].children,val,level)
	            }
	          }
	        }
	        
          return data;
      }
	}

实现结果：