【vue3】省市区三级联动 —— element-china-area-data

1、安装

npm install element-china-area-data -S

2、使用

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

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

3、省市区三级联动——代码示例

<script setup lang="ts">
    //引入
    import {regionData} from "element-china-area-data";
    //区域码
    const hSelectedRegion = ref();
    //区域名
    const hSelectedRegionLabel = ref('');
    //选完省市区后触发的回调函数
    const handleChange = (value) => {
      hSelectedRegion.value = value;
      hSelectedRegionLabel.value = getRegionLabel(value);
    };
    //把区域码转成区域名的方法
    //在form表单提交时需要把区域码转成区域名。eg:getRegionLabel (['31'，'3101'，'310117'])
    const getRegionLabel = (value) => {
    if (!value) return
    let label = '';
    let data = regionData;
    for (let i = 0; i < value.length; i++) {
        const item = data.find(item => item.value === value[i]);
        if (item) {
          label += item.label;
          data = item.children;
          if (i < value.length - 1) {
            label += ' / ';
          }
        } else {
          break;
        }
      }
      return label;
    };
    //把区域名转成区域码的方法
    //在数据回显时需要把拿到的区域名转成区域码。eg:getRegionCode(['上海市'，'市辖区'，'闵行区'])，注意不能有空格，否则查不到就不法回显
    const getRegionCode = (label) => {
      if (!label) return
      let code = [];
      let data = regionData;
      for (let i = 0; i < label.length; i++) {
        const item = data.find(item => item.label === label[i]);
        if (item) {
          code.push(item.value);
          data = item.children;
        } else {
          break;
        }
      }
      return code;
    };


</script>
<template>
  <el-dialog
      title="修改开票寄送信息"
      v-model="dialogVisible"
      :close-on-click-modal="false"
      width="650px"
      @open="openDialog"
      center
  >
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        status-icon
        label-width="120px"
        class="demo-ruleForm"
        v-loading="loading"
    >
        <el-form-item label="发票收件地址" prop="addr">
          <el-cascader size="large" :options="regionData" v-model="hSelectedRegion" @change="handleChange" placeholder="请选择省市区" style="width: 60%;margin-bottom: 10px" clearable></el-cascader>
          <el-input v-model="ruleForm.address.detail" type="text" placeholder="请输入详细地址" clearable/>
        </el-form-item>
      
      <el-form-item>
        <el-button plain @click="submitForm(ruleFormRef)">确定</el-button>
        <el-button plain @click="dialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

 代码里的区域码和区域名的转换是我自己写的方法，后来发现element-china-area-data提供的有个对象codeToText['区域码']可以直接转