中国省市区级联数据（三级联动选择器）

一、安装命令

npm install element-china-area-data -S

二、引用

1.provinceAndCityData省市二级联动数据,汉字+code
2.pcTextArr省市联动数据，纯汉字
3.regionData省市区三级联动数据
4.pcaTextArr省市区联动数据，纯汉字
5.codeToText是个大对象，属性是区域码，属性值是汉字 用法例如：codeToText['110000']输出北京市

import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText
} from "element-china-area-data";

三、整体代码

:options：绑定三级联动数据

v-model：绑定所选编号存储位置

@change：选择后调用，进行编号转中文

handleChange：该方法可以根据自己需求自行编写

codeToText[编号];该方法参数为所选编号，返回中文，所选编号为数组记得遍历翻译

注：如果后续涉及到回显，建议将编号储存数据库！！！ 

<template>
  <div>
    <el-form :model="userData" ref="userData">
      <el-form-item label="现住址" prop="address">
        <el-cascader
            size="large"
            :options="options"
            v-model="userData.selectedOptions"
            @change="handleChange"
            placeholder="请选择现住址"
        ></el-cascader>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="modification()">确 定</el-button>
    </div>
  </div>
</template>

<script>
import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText,
} from "element-china-area-data";

export default {
  name: "app",
  data() {
    return {
      userData: {
        address: '',// 现住址
        selectedOptions: [],// 所选择的省市区编号
      },// 注册form表单
      options: regionData,// 省市区数据
    };
  },

  methods: {
    // 提交
    modification() {
      console.log("所选择的省市区数据：", this.userData.address)
    },
    // 将选择的省市区编号进行转换
    handleChange() {
      // 拼接省市区所选编号
      var add = ",";
      // 遍历所选省市区编号
      for (let i = 0; i < this.userData.selectedOptions.length; i++) {
        if (i === 0) {
          // 将编号转换为中文拼接进this.userData.address中
          this.userData.address += codeToText[this.userData.selectedOptions[i]];
          // 将编号进行拼接进add中
          add += this.userData.selectedOptions[i];
        } else {
          // 将编号转换为中文拼接进this.userData.address中
          this.userData.address += "/" + codeToText[this.userData.selectedOptions[i]];
          // 将编号进行拼接进add中
          add += "/" + this.userData.selectedOptions[i];
        }
      }
      // 将所选择的编号拼接进this.userData.address中
      this.userData.address += add;
    },
  }
};
</script>
<style>

</style>

四、效果

1.页面效果

 2.所选择的省市区数据： this.userData.address

        该数据为handleChange方法拼接所得，若只需要转换的中文将方法中的变量add删除即可得到（北京市/市辖区/东城区）