扁平地址数据转化为树形结构，并使用elementui的级联选择器,或者使用懒加载的方式选择地址

先了解几个函数的用途
Array.isArray(object);
参数：object是要检测的内容，返回值是布尔类型的，用于判断传进来的object是否为数组，如果是数组则返回true,否则返回false
一、第一种后端把全部地址返回给你，自己处理成树形结构使用这种：
转化为树形结构代码:

changeToTree(list){
let result=[];
//不是数组则返回result
if(!Array.isArray(list)){
return result
}
list.forEach(item => {
delete item.children; //删除list中的children
});
let map = {}; 
//一般定义了一个空对象，后面加一个[]就是代表着取某对象的某属性值，这是js的一种语法
list.forEach(item => {
map[item.id]=item;
});
list.forEach(item => {
let parent = map[item.parentId];
if (parent) {
  (parent.children || (parent.children = [])).push(item);
}else {
 result.push(item);
}
});
this.regionalList = result;
}

第二步使用elementui的级联选择插件，其中的props属性最为关键，如果你的树形结构和elementui上的此插件的属性名不一样，可以在props里面配置，例如我这里保存的值是fcode,然后我让value绑定fcode;label绑定fname等。可以直接在props中写，也可以用props绑定一个对象

第一种，直接在props里面写
<el-cascader v-model="formInline.area" :options="regionalList" :show-all-levels="false"  :props="{checkStrictly: true,value:'fcode',label:'fname',children: 'children'}" @change="handleChange"></el-cascader>
第二种，props绑定对象
<el-cascader v-model="form.region" :options="regionalList" @change="handleEnterChange" :props="optionProps"></el-cascader>
然后在定义optionProps对象
optionProps: {
			        value: 'fcode',
					label: 'fname',
					children: 'children'
				}

第二种点击上一级后端返回下一级数据，采用懒加载的方式处理：
因为数据量比较大，这边选用的是使用elementui的懒加载方式的级联选择器进行加载数据。
主要代码如下所示：

<el-cascader 
   :props="props" 
   clearable 
   placeholder="请选择区域" 
   :show-all-levels="false"
   @change="changeValue2">
</el-cascader>

在data中定义prop如下所示：

props: {
		 lazy: true,
		checkStrictly: true,
		lazyLoad: this.cascaderLazyload
  },

在methods中具体实现懒加载回调

// 懒加载回调
			cascaderLazyload(node, resolve) {
				const {level,data} = node;
				let code = null;
				if (level == 0) {
				this.$apiData.cityList().then(res => {
					let a = [];
					for (let item of res.data.data.regionList) {
							a.push({
								value: item.regionCode,
								label: item.regionName
							});
						}
						resolve(a);
					})
				} else {
					this.$apiData.List({
						regionCode: node.value
					}).then(res => {
						let array = []
						let dataList = res.data.data.regionList || []
						for (let item of dataList) {
							array.push({
								value: item.regionCode,
								label: item.regionName,
								leaf: dataList.length == 0
							});
						}
						resolve(array);
					})
				}
			},

在级联选择器中获取到所选中的那个对象，可以在@change中调用官网提供的getCheckedNodes()方法

//给el-cascader标签加上ref属性
            <el-cascader
                style="width: 80%;"
                v-model="formData.area"
                :options="treeData"
                :props="treeProp"
                :emitPath="false"
                 @change="changeValue(formData[item.prop])"
                 ref="cascader"
              ></el-cascader>


//可以在changeValue方法中使用this.$refs.cascader[0].getCheckedNodes()获取到当前点击的对象。
//在这里要注意一下如果报错getCheckedNodes()没有定义，这时你要打印出来this.$refs.cascader看看有没有这个方法。
//还要注意如果this.$refs.cascader是个对象的话，你可以直接使用this.$refs.cascader.getCheckedNodes()方法，
//如果是数组的话要这样子使用：this.$refs.cascader[0].getCheckedNodes()。
//官网上面定义的是直接使用this.$refs.cascader.getCheckedNodes()，但是我在使用的时候报错,说没有定义，我打印出来this.$refs.cascader发现他是一个数组，为啥是一个数组我也不知道。
 changeValue(data){
    // nodesObj就是我们所选中的对象
    let nodesObj = this.$refs.cascader[0].getCheckedNodes()
    console.log(data,nodesObj);
 },