级联下拉框Json数据构建

制作地区的级联下拉框

获取后端数据

this.axios.get('后台访问地址')
				.then(res => {
    				console.log(res.data);
					对后台传来数据进行处理
				}

首先我这边请求接收到的数据：

开始处理后台数据

//获取到所有商家的地区
for (var i = 0; i < res.data.data.length; i++) {
	this.merchantsCityData.push(res.data.data[i].merchants_city);
}

数据：

获取到级联必要的两个数组

//获取地区相关的数据
for (var i = 0; i < this.merchantsCityData.length; i++) {
	var chainsDate = [];
	chainsDate.push(this.merchantsCityData[i].split('-'));		//拆分每一条数据为省，市，区的小数组
	for (var j = 0; j < chainsDate.length; j++) {
		this.province.push(chainsDate[0][0]);					//获取每条数据中的省份
		this.merchantsCity.push(chainsDate[0]);					//将每个小数组存放到一个数组中
	}
}
this.duplicate(this.province);				//手写一个去重的方法对省份去重

开始操作数组使其形成我们所需的Json数据样式

/**
数据样式options:[{
	value:'',
	label:'',
	children:[{
		value:'',
		label:'',
		children:[{
			value:'',
			label:''
		}]
	}]
}]
*/
for (var j = 0; j < this.province.length; j++) {
	var a = {
		value: '',
		label: '',
		children: []
	}; 
	//获取一级目录,即省份
	a.value=this.province[j];
	a.label=this.province[j];
	//创建二级目录所需的地区
	var shuzu = [];
	//创建二级目录所需的数据
	var shuzu2 = [];
	//筛选二级目录
	for (var i = 0; i < this.merchantsCity.length; i++) {
		if (this.merchantsCity[i][0] == this.province[j]) {
			shuzu.push(this.merchantsCity[i]);
			shuzu2.push(this.merchantsCity[i][1]);
		}
	}
	this.duplicate(shuzu2);
	//循环遍历二级目录
	for(var m=0;m<shuzu2.length;m++){
		var b = {
			value: '',
			label: '',
			children: []
		};
		//获取二级目录，即市
		b.value=shuzu2[m];
		b.label=shuzu2[m];
		//创建三级目录所需的数据
		var shuzu3 = [];
		for(var k=0;k<shuzu.length;k++){
			if(shuzu[k][1]==shuzu2[m]){
				shuzu3.push(shuzu[k][2]);
			}
		}
		this.duplicate(shuzu3);
		for(var n=0;n<shuzu3.length;n++){
			var c = {
				value: '',
				label: '',
			}
			//获取三级目录，即区
			c.value=shuzu3[n];
			c.label=shuzu3[n];
			//三级目录添加到二级目录
			b.children.push(c);
		}
		//二级目录添加到一级目录
		a.children.push(b);
	}
	//将一级目录存放到级联下拉框中
	this.options.push(a);
}

整体代码

<el-cascader v-model="merchantsCityValue" placeholder="请选择地区" :options="options" ></el-cascader>

export default {
		name: "bussinessCensus",
		data() {
			return {
				merchantsCityData: [],			//所有商家地区的数组
				merchantsCity: [],				//分割成省，区，县的商家地区数组
				province: [],					//所有商家所在地区的省份
				data:[],						//获取后台传送的数据
				merchantsCityValue: [],			//获取地区下拉框中的值
				options: [],					//地区下拉框级联数组样式
			}
		},
		mounted() {
			this.axios.get('后台链接')
				.then(res => {
					if (res.data.code == 200) {
						console.time('globel');
						//获取后台传送来的数据
						for (var i = 0; i < res.data.data.length; i++) {
							this.merchantsCityData.push(res.data.data[i].merchants_city);
						}
						
						//获取地区相关的数据
						for (var i = 0; i < this.merchantsCityData.length; i++) {
							var chainsDate = [];
							chainsDate.push(this.merchantsCityData[i].split('-'));
							for (var j = 0; j < chainsDate.length; j++) {
								this.province.push(chainsDate[0][0]);
								this.merchantsCity.push(chainsDate[0]);
							}
						}
						this.duplicate(this.province);
						
						/*
						获取到省份数组（province）和所有由省、区、县组成小数组构成一个大数组（merchantsCity）
						使用autoSelect方法可以获取级联下拉框所需的数据
						*/
						this.autoSelect();
						for (var j = 0; j < this.province.length; j++) {
							var a = {
								value: '',
								label: '',
								children: []
							}; 
							//获取一级目录
							a.value=this.province[j];
							a.label=this.province[j];
							//创建二级目录所需的地区
							var shuzu = [];
							//创建二级目录所需的数据
							var shuzu2 = [];
					
							//筛选二级目录
							for (var i = 0; i < this.merchantsCity.length; i++) {
								if (this.merchantsCity[i][0] == this.province[j]) {
									shuzu.push(this.merchantsCity[i]);
									shuzu2.push(this.merchantsCity[i][1]);
								}
							}
							this.duplicate(shuzu2);
					
							//循环遍历二级目录
							for(var m=0;m<shuzu2.length;m++){
								var b = {
									value: '',
									label: '',
									children: []
								};
								//获取二级目录
								b.value=shuzu2[m];
								b.label=shuzu2[m];
								//创建三级目录所需的数据
								var shuzu3 = [];
								for(var k=0;k<shuzu.length;k++){
									if(shuzu[k][1]==shuzu2[m]){
									shuzu3.push(shuzu[k][2]);
									}
								}
								this.duplicate(shuzu3);
								for(var n=0;n<shuzu3.length;n++){
									var c = {
											value: '',
											label: '',
										}
										//获取三级目录
										c.value=shuzu3[n];
										c.label=shuzu3[n];
									//三级目录添加到二级目录
									b.children.push(c);
								}
							//二级目录添加到一级目录
							a.children.push(b);
							}
						//将一级目录存放到级联下拉框中
						this.options.push(a);
						}
						console.timeEnd('globel');
					}
				});
		},
		methods: {},
		watch: {},
		created() {}
	}

Axions知识点小补充

this.axios.get('后台访问地址'，
	（可选项){params:{
				name:"张三"，
      		  	age:18
			}
	}).then(res => {
		对后台传来数据进行处理
	}
跟着访问地址后面的是可选项params，可在其中添加需要传到后台的参数

例子：

this.axios.get('user'，{
	params:{
		name:"张三"，
        age:18
	}
		}).then(res => {
		对后台传来数据进行处理
	}
当前端发送请求时链接就会变成这个：user?name=张三&age=18
age:18
			}
	}).then(res => {
		对后台传来数据进行处理
	}
跟着访问地址后面的是可选项params，可在其中添加需要传到后台的参数

例子：

this.axios.get('user'，{
	params:{
		name:"张三"，
        age:18
	}
		}).then(res => {
		对后台传来数据进行处理
	}
当前端发送请求时链接就会变成这个：user?name=张三&age=18