el-cascader级联实现已有区域省、市、区选择并保存区域id

一.需求分析

前几天公司有一个需求，多选已配置好的区域（包括省、市、区/县）,并返回区域的id。这听起来好像很正常，但我的数据是这样的：

1.这是所有区域的json文件格式:

city下的每一项：country_code表示当前城市属于的国家； province_code表示当前城市属于的省份；code为当前城市的code。

country下的每一项：code为当前国家的code。

district下的每一项：country_code表示当前 县/区 属于的国家； province_code表示当前 县/区 属于的省份；city_code为当前 县/区 属于的城市。

province下的每一项：country_code表示当前省份属于的国家。

2.这是后台返回的已配置的区域的数据格式：
包含当前地区的country_code、province_code、city_code、district_code，唯一标识feelec_area_id。
最后需要返回一个feelec_area_id的数组给后端。

二.实现效果

1.级联选择效果图：

2.选择项返回结果：一个feelec_area_id组成的数组

先别急着鼓掌，接下来看看我是怎么实现的。

三.代码实现

要使用看似没有关系的数据实现数据的关联最重要的就是数据结构的重组。经过我不久的思索，思路是这样的：

1.通过el-cascader级联组件所需要的数据可以显然的知道我们需要一个树型结构的数据，用树型结构的数据来供我们选择。

2.我们这里默认是中国下的地区，所以我们最多需要三层数据，也就是数的深度最大为3。第一层为省份的信息，第二层为市的信息，第三层为 区/县 的信息（也有可能没有 区/县，那么就没有第三层）。

3.根据已配置的区域信息来看，我们只要通过属性分组，先把相同省份的分出来作为父级，子级就是省份下的市和区/县，再把子级的市来分组作为父级，那么市的子级就是区/县。

4.但是数据只有当前的区域对应的code，我们还需要省，市，区的名字。只需通过code在地区json文件找到名字再添加进每一层的数据中就行了。

我们期望最后重组的数据长这样：

let data = {
   
   
	province_code:'省份code',
	name:'省份名字',
	children:[
		{
   
   
			city_code:'城市code',
			name:'城市名字',
			children:[
				{
   
   
					district_code:'区/县code',
					name:'区/县名字',
					feelec_area_id：'此区域id'
				}
			]
		}
	]
}

这一部分代码（有点复杂 看不懂的问我）：

<template>
  <div >
          <el-cascader
            style="width: 100%"
            :options="options"
            :props="props"
            collapse-tags
            placeholder="请选择服务区域"
            @change="areaChange"
          ></el-cascader>
  </div>
</template>

<script>
import Vue from "vue";
import publicAxios from "@/assets/api/publicAxios";
export default {
   
   
  components: {
   
    Avatar },
  data() {
   
   
    return {
   
   
      default_country_code: 1,
      props: {
   
   
        label: "name",
        value: "feelec_area_id",
        children: "children",
        emitPath: false,
        multiple: true,
      },
      options: [],
      province: [],
      form: {
   
   
        feelec_areas: [],
      },
    }