制作地区的级联下拉框

获取后端数据

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