vue3 省市县三级下拉框

实现效果

代码示例

import AreaSelectr from '@/components/Areaselect' // 引入组件

<el-col :span="12">
    <el-form-item label="常驻地" prop="areaNo">
        <AreaSelectr v-model="form.areaNo" @change="(name) => form.areaName = name"/>
    </el-form-item>
</el-col>

代码实现

1. 安装 element-china-area-data 组件库

   npm install element-china-area-data -S

2. 封装组件

// /src/components/Areaselect.vue
<template>
  <div>
    <el-cascader 
      :size="size" 
      :options="regionArr" 
      v-model="provinces" 
      filterable
      clearable
      @change="dynamicHandleChange" 
      :placeholder="placeholder"
      :parameters="parameters"
    ></el-cascader>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import { regionData } from 'element-china-area-data'

// 定义 props
const props = defineProps({
  size: {
    type: String,
    default: "", 
  },
  placeholder: {
    type: String,
    default: "请选择省市区", 
  },
  parameters: {
    type: String,
    default: "code", 
  },
  modelValue: {
    type: String,
    required: true 
  }
});

// 定义 emits
const emit = defineEmits(['update:modelValue', 'change']);

// 响应式数据
const provinces = ref([]);
const regionArr = ref(regionData)
// watch 监听 selectValue 的变化
watch(() => props.modelValue, (newValue) => {
  if(!newValue) {
    provinces.value = []
    return
  }
  // 确保选择框中的值已经更新完成
  provinces.value = newValue.split('/'); 
}, { immediate: true });

// 方法定义
const dynamicHandleChange = (e) => {
  if (props.parameters === "name") {
    emit('update:modelValue', ideograph(e))
  } else {
    emit('change', ideograph(e))
    emit('update:modelValue', figure(e))
  }
};

const ideograph = (code) => {
  const areas = [];
  if (Array.isArray(code) && code.length) {
    let region = regionData;
    for (let i = 0; i < code.length; i++) {
      const item = code[i];
      const found = region.find((regionItem) => regionItem.value === item);
      if (found) {
        areas.push(found.label); 
        region = found.children || [];
        if (i === code.length - 1) {
          // 最后一个区域，可以打印或进行其他处理
        }
      } else {
        break;
      }
    }
  }
  return areas.join("/");
};

const figure = (code) => {
  if(!code) return
  return code.join('/');
};
</script>