vue2+elementui，Cascader封装中国省市区选择器，可多选，单选，单级选

由来

项目需要多选，单选，单级选的组件，但是翻开elementui的官网，发现没有，查看诸多blog，发现没有自己想要的，就自己动手弄一弄吧

安装element-china-area-data

npm install element-china-area-data@5.0.2  -S

一定要是自己确定版本号，不然最新的版本会报错，虽然不影响使用，但是看着不舒服，无代码洁癖随意！

创建自定义组件

在合适位置创建组件，文件夹名字为ChinaAreaCascader，下面新建index.vue，代码如下：

<template>
  <div>
    <!-- 设置可选择单个级别  :props="{ checkStrictly: true }"-->
    <el-cascader
      :props="{ checkStrictly: checkStrictly, multiple: multiple }"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange"
      :style="{ width: width }"
    />
  </div>
</template>

<script>
import { regionData, CodeToText, TextToCode } from 'element-china-area-data';
export default {
  props: {
    // 绑定值, 当多选时，传入参数应该是数组，如['广东省', '湖南省']，当单选时，传入参数应该是字符串，如'广东省/广州市/越秀区'
    value: [String, Array, Object],
    // 是否多选
    multiple: { type: Boolean, default: false },
    // 是否可选择单级
    checkStrictly: { type: Boolean, default: false },
    // 组件宽度
    width: { type: String, default: '210px' },
  },
  watch: {
    value: {
      handler(val) {
        if (val) {
          // 首先将值转为数组
          // console.log('绑定的省市区值变化了', val, this.selectedOptions);
          // console.log('fdsfsfsf', typeof val);
          if (typeof val === 'string') {
            this.selectedOptions = this.getTextToCode(val);
          }
          if (typeof val === 'object') {
            console.log('这是多选的地址进来了');
            this.selectedOptions = val.map(item => {
              // console.log('item', item);
              let result = this.getTextToCode(item);
              // console.log('result', result);
              return result;
            });
            console.log('多地址转换结果this.selectedOptions', this.selectedOptions);
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      options: regionData,
      selectedOptions: [],
    };
  },

  methods: {
    getTextToCode(val) {
      if (val.indexOf('/') > -1) {
        const areaList = val.split('/');
        if (areaList.length == 1) {
          console.log('省');
          return [TextToCode[val.split('/')[0]].code];
        }
        if (areaList.length == 2) {
          let codeArr = [
            TextToCode[val.split('/')[0]].code,
            TextToCode[val.split('/')[0]][val.split('/')[1]].code,
          ];
          console.log('省/市', codeArr);
          return codeArr;
        }
        if (areaList.length == 3) {
          let codeArr = [
            TextToCode[val.split('/')[0]].code,
            TextToCode[val.split('/')[0]][val.split('/')[1]].code,
            TextToCode[val.split('/')[0]][val.split('/')[1]][val.split('/')[2]].code,
          ];
          console.log('省/市/区', codeArr);
          return codeArr;
        }
      }
      console.log('只有一个名称');
      return [TextToCode[val].code];
    },
    handleChange(value) {
      console.log('handleChange', value);
      if (this.multiple) {
        console.log('多选', value);
        let distAreaArr = [];
        for (var i = 0; i < value.length; i++) {
          distAreaArr.push(this.getCodeToText(null, value[i]));
        }
        this.$emit('input', distAreaArr);
        return;
      }
      console.log('单选', value);
      let area = this.getCodeToText(null, value);
      this.$emit('input', area);
      console.log('selectedOptions', this.selectedOptions);
    },
    getCodeToText(codeStr, codeArray) {
      try {
        let area = '';
        if (null === codeStr && null === codeArray) {
          return null;
        } else if (null === codeArray) {
          codeArray = codeStr.split(',');
        }
        switch (codeArray.length) {
          case 1:
            area += CodeToText[codeArray[0]];
            break;
          case 2:
            area += CodeToText[codeArray[0]] + '/' + CodeToText[codeArray[1]];
            break;
          case 3:
            area +=
              CodeToText[codeArray[0]] +
              '/' +
              CodeToText[codeArray[1]] +
              '/' +
              CodeToText[codeArray[2]];
            break;
          default:
            break;
        }
        // console.log('计算出来的区域信息', area);
        return area;
      } catch (error) {
        console.log('获取地区信息失败', error);
      }
    },
  },
};
</script>

<style>
input[aria-hidden='true'] {
  display: none !important;
}

.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
  box-shadow: none;
}
</style>

使用

在需要使用的地方引入，如下：

import ChinaAreaCascader from '@/views/components/ChinaAreaCascader';
export default {
  components: { ChinaAreaCascader },
<!-- 略 -->
}

使用：

         <ChinaAreaCascader
              :multiple="true"
              :checkStrictly="true"
              width="210px"
              v-model="product.placeOfOrigin"
            />

通过v-model就可以给组件赋值和接收组件选择的值
自定义组件的可选参数如下：

	// 是否多选
    multiple: { type: Boolean, default: false },
    // 是否可选择单级
    checkStrictly: { type: Boolean, default: false },
    // 组件宽度
    width: { type: String, default: '210px' },

效果
单选

多选，可单级选