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

快来打我* 2021-07-25 11:51 1664阅读 0赞

## 地区选择组件 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]  
如果是区域经理之类的，权限可以包含多个地区的，则需要多选  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]  
下面就地区单选与地区多选进行详细的介绍

需要实现上面的功能，所需要用到的是cascader级联选择器。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]

### 单选地区代码 ###

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

注释如下：  
![在这里插入图片描述][20200924115956273.png_pic_center]

1.  v-model等同于value，意义在于选中项的绑定值  
    ![在这里插入图片描述][20200924120037943.png_pic_center]
2.  options：可选项数据源，键名可通过props属性配置，一般都是本地的文件导入的。例如地区数据源  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 3]
3.  props 的写法应该跟地区数据源,相当于别名  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 4]  
    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获取到地区名称 ###

![在这里插入图片描述][20200924131823700.png_pic_center]  
此处的"北京北京市东城区"是根据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;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/c182678d250c41ce87022228c4caaa0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/28d7120c650a467095f2bb03ef0199c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210725/02ba72652dd34befa8db0b449adca8a6.png
[20200924115956273.png_pic_center]: /images/20210725/74c77c831e13498c8f01b26629e8eed0.png
[20200924120037943.png_pic_center]: /images/20210725/91be832968e147038571ae2e60393fb8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210725/f486412c2856435d812bf37ce0113e21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20210725/c1af7fe17d414846ba3e404bbb5a4636.png
[20200924131823700.png_pic_center]: /images/20210725/535c98b58ce045aa814daf0423b4ee59.png