vue+ElementUI实现下拉地址列表多选功能

公司需求需要一个负责人负责多个国家或地区的业务，所以需要一个能够多选的地址下拉组件

1、首先找到ElementUI的多选下拉组件，props为组件哦配置项，设置value和lable的属性与后台返回的数据相对应

 <el-row :gutter="10" type="flex" class="row-bg" justify="space-between">
    <el-col :span="24">
      <el-cascader
        v-model="regionList"
        :options="country_list"
        :size="'mini'"
        :props="{
          multiple: true,
          checkStrictly: true,
          value: 'name',
          label: 'name',
        }"
        clearable
        @change="searchAddress()"
      >
      </el-cascader>
    </el-col>
  </el-row>

2、准备数据

 data() {
    return {
      regionList: "",
      originalList: "", //地址列表
      country_list: "", //存放树形数据列表
    };
  },

3、获取世界行政区的列表，接口需要自己定义

   getRegionList() {
      Api.regionList().then((res) => {
        this.originalList = [...res.data];
        // console.log(this.originalList, "原始");
        let regions = this.optionData(res.data);  //转换树形数据
        this.country_list = regions;
        // console.log(this.country_list, "000");
      });
    },

4、将返回的行政区列表转换为组件需要的树形数据

 /* 转树形数据 */
    optionData(treeData) {
      let cloneData = JSON.parse(JSON.stringify(treeData)); // 对源数据深度克隆
      return cloneData.filter((father) => {
        // 循环所有项，并添加children属性
        let branchArr = cloneData.filter((child) => father.id == child.pid); // 返回每一项的子级数组
        branchArr.length > 0
          ? (father.children = branchArr)
          : (father.children = []); // 给父级添加一个children属性，并赋值
        return father.pid == 0; // 返回第一层
      });
    },

5、将写好的组件放在需要用的地方

 <ressRegion @AddChange="AddChange" :Address="Address" ref="ressRegion"></ressRegion>

6、在组件上定义change方法，当地址发生改变的时候，触发事件，通过$emit通知父组件触发方法，并将数据传给父组件

 searchAddress() {
    //将数据转换为后端需要的格式（可根据后端要求来）
      const addRess = {
        region: this.regionList,
        address: null,
        regionId: this.getRegionsId() || "", //查找行政区域的id
      };
      this.$emit("AddChange", JSON.stringify(addRess));
    },

7、封装查找行政区域的id的方法，

由于选择地址的value我们绑定了name属性，所以选择后的数据是这样的，所以要根据选择的地址查找地址id

判断是否选择了地址，

如果有的地址话，定义一个空数组

对选择的地址通过forEach和filter进行双重遍历，将结果push到一个新数组里面

   //返回行政区域id
    getRegionsId() {
      let result = "";
      if (this.regionList) {
        let add = []
        this.regionList.forEach(i => {
          add.push ( this.originalList.filter(item => item.name == i[i.length-1])[0].id)
        })
        result = this.regionList ? add.join(',') : "";
        console.log(add,'筛选');
      }
      return result;
    },

8、最后我们点击编辑的时候还要对地址进行回显

//通过 watch监听，实现地址的回显
watch: {
    // 数据回显
    Address: {
      handler(val) {
        // console.log(val, '00');
      let ress = JSON.parse(val).region
      this.regionList = ress;
                },
                immediate: true,
                deep: true,
            },
  },

9、实现的效果