记录一下vue3 setup 城市组件基于elemetPlus_element plus 城市选择组件-CSDN博客

本文链接：https://blog.csdn.net/userid19/article/details/129428927

文章展示了如何在Vue.js应用中使用el-select组件实现省市区三级联动选择，并处理change事件更新数据。同时，有一个输入框用于输入详细地址。数据来源于address.json文件，provinceChange、cityChange和countryChange函数分别处理不同级别的选择变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div>
        <!-- value绑定的是对象，当改变值的可以取item的值，这时候必须制定value-key的值，标识选择框中显示的字段名称 -->
        <el-select
            v-model="data.provinceObj"
            placeholder="请选择"
            @change="provinceChange"
            value-key="name"
        >
            <el-option
                v-for="(item, index) in data.provinceData"
                :key="index"
                :label="item.name"
                :value="item"
            ></el-option> </el-select
        >&nbsp;&nbsp;
        <el-select
            v-model="data.cityObj"
            placeholder="请选择"
            @change="cityChange"
            value-key="name"
        >
            <el-option
                v-for="(item, index) in data.cityData"
                :key="index"
                :label="item.name"
                :value="item"
            ></el-option> </el-select
        >&nbsp;&nbsp;
        <el-select
            v-model="data.countryObj"
            placeholder="请选择"
            @change="countryChange"
            value-key="name"
        >
            <el-option
                v-for="(item, index) in data.countryData"
                :key="index"
                :label="item.name"
                :value="item"
            ></el-option> </el-select
        >&nbsp;&nbsp;
        <el-input
            class="input"
            v-model="data.input"
            placeholder="请输入详细地址"
            @input="inputChange"
        />
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import ProvinceCityCountry from '../../assets/json/address.json'
const emits = defineEmits(['change'])
const data = reactive({
    provinceObj: { name: '' },
    cityObj: { name: '' },
    countryObj: { name: '' },
    provinceData: ProvinceCityCountry.address,
    cityData: [],
    countryData: [],
    input: '',
})
// 省份change
const provinceChange = value => {
    data.cityData = value.children // 市下拉列表
    data.countryData = [] // 清空区县下拉列表数据
    data.cityObj = {} // 清空市输入框内容
    data.countryObj = {} // 清空区县输入框内容
}
// 市change
const cityChange = value => {
    data.countryData = value.children // 县区下拉框列表
    data.countryObj = {} // 清空区县输入框内容
}
// 县change
const countryChange = value => {
    emits('change', data)
}
const inputChange = () => {
    emits('change', data)
}
</script>

<style lang="less" scoped>
.input {
    width: 203px;
}
</style>

下面是adderss.json

https://github.com/zxc19890923/province-city-country-json/blob/main/address.json

province-city-country-json/address.json at main · zxc19890923/province-city-country-json (github.com)

记录一下vue3 setup 城市组件 基于elemetPlus

记录一下vue3 setup 城市组件基于elemetPlus