Vue3 + Element Plus 省市区县级联组件封装,支持 v-model 双向绑定 + 回显,可直接复用

<template>
    <div class="region-picker">
        <el-select v-model="provinceId" placeholder="省" clearable style="flex: 1" @change="handleProvinceChange">
            <el-option v-for="item in provinceList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="cityId" placeholder="市" clearable :disabled="!provinceId" style="flex: 1; margin: 0 8px"
            @change="handleCityChange">
            <el-option v-for="item in cityList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="districtId" placeholder="区/县" clearable :disabled="!cityId" style="flex: 1">
            <el-option v-for="item in areaList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
    </div>
</template>
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
// 模拟省市区数据（实际项目可替换为接口）
const regionData = [
    {
        value: '110000',
        label: '北京市',
        children: [
            {
                value: '110100',
                label: '北京市',
                children: [
                    { value: '110101', label: '东城区' },
                    { value: '110102', label: '西城区' },
                    { value: '110105', label: '朝阳区' },
                    { value: '110106', label: '丰台区' },
                    { value: '110108', label: '海淀区' },
                ]
            }
        ]
    },
    {
        value: '410000',
        label: '河南省',
        children: [
            {
                value: '410100',
                label: '郑州市',
                children: [
                    { value: '410102', label: '中原区' },
                    { value: '410103', label: '二七区' },
                    { value: '410104', label: '管城回族区' },
                    { value: '410105', label: '金水区' },
                ]
            },
            {
                value: '410300',
                label: '洛阳市',
                children: [
                    { value: '410302', label: '老城区' },
                    { value: '410303', label: '西工区' },
                ]
            }
        ]
    }
]
// 类型定义
interface RegionModel {
    provinceId: string
    cityId: string
    districtId: string
}
// 接收 v-model
const props = withDefaults(defineProps<{
    modelValue?: RegionModel
}>(), {
    modelValue: () => ({ provinceId: '', cityId: '', districtId: '' })
})
// 抛出事件
const emit = defineEmits<{
    'update:modelValue': [value: RegionModel]
    'change': [value: RegionModel]
}>()
// 内部选中值
const provinceId = ref('')
const cityId = ref('')
const districtId = ref('')
// 省列表
const provinceList = computed(() => regionData || [])
// 市列表（根据省动态计算）
const cityList = computed(() => {
    if (!provinceId.value) return []
    const p = regionData.find(item => item.value === provinceId.value)
    return p?.children || []
})
// 区县列表（根据市动态计算）
const areaList = computed(() => {
    if (!cityId.value) return []
    const c = cityList.value.find(item => item.value === cityId.value)
    return c?.children || []
})
// 切换省 → 清空市、区县
const handleProvinceChange = () => {
    cityId.value = ''
    districtId.value = ''
    emitValue()
}
// 切换市 → 清空区县
const handleCityChange = () => {
    districtId.value = ''
    emitValue()
}
// 向外抛出数据
const emitValue = () => {
    const value = {
        provinceId: provinceId.value,
        cityId: cityId.value,
        districtId: districtId.value,
    }
    emit('update:modelValue', value)
    emit('change', value)
}
// 监听父组件 v-model 实现回显
watch(
    () => props.modelValue,
    (val) => {
        if (val) {
            provinceId.value = val.provinceId || ''
            cityId.value = val.cityId || ''
            districtId.value = val.districtId || ''
        }
    },
    { deep: true, immediate: true }
)
// 监听内部变化 → 自动同步父组件
watch([provinceId, cityId, districtId], emitValue)
</script>
<style scoped>
.region-picker {
    display: flex;
    width: 100%;
    gap: 8px;
}
</style>

<template>
  <RegionPicker v-model="queryRegion" @change="handleChange" />
</template>
<script setup>
import RegionPicker from '@/components/RegionPicker/index.vue'
const queryRegion = ref({
  provinceId: '',
  cityId: '',
  districtId: ''
})
const handleChange = (val) => {
  console.log('选中的省市区：', val)
}
</script>