<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
>
<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
>
<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
>
<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