element-ui 地区选择单选与多选及数据回填

地区选择组件

在电商的后台管理系统，少不了的是地址地区，在选择地区时，有单选与多选之分。
比如收货地址的地区，是单选的。

如果是区域经理之类的，权限可以包含多个地区的，则需要多选

下面就地区单选与地区多选进行详细的介绍

需要实现上面的功能，所需要用到的是cascader级联选择器。

单选地区代码

<el-cascader v-model="oneLevelForm.regionId" :options="regionsBuff" :props="optionProps" />

注释如下：

1. v-model等同于value，意义在于选中项的绑定值
   

2. options：可选项数据源，键名可通过props属性配置，一般都是本地的文件导入的。例如地区数据源
   

3. props 的写法应该跟地区数据源,相当于别名
   
   value 对应的是code,label对应的是name,children对应的是childs.

optionProps: {
  value: "code",
  label: "name",
  children: "childs"
}

地区选择的值是地区的code值。

多选地区代码

<el-cascader v-model="oneLevelForm.regionIds" :options="regionsBuff" :props="areaProps" />

与单选地区不同的是： multiple为true，则为多选，默认为false即单选。

areaProps: {
  value: "code",
  label: "name",
  children: "childs",
  multiple: true
}

数据回填的时候的格式是：
[
[“140000”,“143200”,“143201”],[“140000”,“143200”,“143205”]
]

后台返回的数据格式是：”143201，143205“，字符串格式的。

此时的格式转化步骤就是：

1. 先将字符串转化为数组。
2. 遍历数组的每一项，根据此项的值，将省市的code码拿出来。
3. 将省市区的code放入到一个数组
   let attrList = msg.split(",");

for (var i = 0; i < attrList.length; i++) {
  let arr = [];
  let provinceCode = attrList[i].slice(0, 2) + "0000";
  let cityCode = attrList[i].slice(0, 4) + "00";
  arr.push(provinceCode);
  arr.push(cityCode);
  arr.push(attrList[i]);
  addArr.push(arr);
}
return addArr;

根据code获取到地区名称

此处的"北京北京市东城区"是根据code码获取到，具体根据code获取地区名的方法如下：

if (code) {
  let provinceCode = code.slice(0, 2);
  let cityCode = code.slice(2, 4);
  let areaCode = code.slice(4, 6);
  let addr = "";
  regions.forEach(item => {
    if (item.code.slice(0, 2) === provinceCode) {
      addr += item.name;
      item.childs.forEach(item2 => {
        if (item2.code.slice(2, 4) === cityCode) {
          addr += item2.name;
          item2.childs.forEach(item3 => {
            if (item3.code.slice(4, 6) === areaCode) {
              addr += item3.name;
            }
          });
        }
      });
    }
  });
  return addr;
}