Vue2+element 地区选择器组件

下载地区数据

npm install element-china-area-data -S

具体代码

<template>
    <div>
        <el-select v-model="selectedProvince" placeholder="请选择省份" @change="handleProvinceChange">
            <el-option v-for="province in provinceData" :key="province.value" :label="province.label"
                :value="province.value"></el-option>
        </el-select>
        -
        <el-select v-model="selectedCity" placeholder="请选择城市" :disabled="!selectedProvince" @change="handleCityChange">
            <el-option v-for="city in cityData" :key="city.value" :label="city.label" :value="city.value"></el-option>
        </el-select>
        -
        <el-select v-model="selectedDistrict" placeholder="请选择区县" :disabled="!selectedCity" @change="handleInputChange">
            <el-option v-for="district in districtData" :key="district.value" :label="district.label"
                :value="district.value"></el-option>
        </el-select>
    </div>
</template>
  
<script>
import { regionData } from "element-china-area-data";

export default {
    name: 'AreaSelect',
    props: {
        value: [String, Object, Array],
    },
    data() {
        return {
            regionData,
            selectedProvince: '',
            selectedCity: '',
            selectedDistrict: '',
            provinceData: this.convertToOptions(regionData),
            cityData: [],
            districtData: [],
        };
    },
    watch: {
        value: {
            deep: true,
            immediate: true,
            handler(val) {
                if (val) {
                    if (val) {
                        const [selectedProvince, selectedCity, selectedDistrict] = val.split(',');
                        this.selectedProvince = selectedProvince;
                        this.selectedCity = selectedCity;
                        this.selectedDistrict = selectedDistrict;
                    }
                } else {
                    this.selectedProvince = '';
                    this.selectedCity = '';
                    this.selectedDistrict = '';
                }
            }
        }
    },
    methods: {
        convertToOptions(data) {
            return data.map(item => ({
                value: item.value,
                label: item.label,
            }));
        },
        handleProvinceChange() {
            const selectedProvinceData = this.regionData.find(item => item.value === this.selectedProvince);
            this.cityData = selectedProvinceData ? this.convertToOptions(selectedProvinceData.children) : [];
            this.districtData = [];
            this.selectedCity = '';
            this.selectedDistrict = '';
        },
        handleCityChange() {
            const selectedProvinceData = this.regionData.find(item => item.value === this.selectedProvince);
            const selectedCityData = selectedProvinceData.children.find(item => item.value === this.selectedCity);
            this.districtData = selectedCityData ? this.convertToOptions(selectedCityData.children) : [];
            this.selectedDistrict = '';
        },
        handleInputChange() {
            const selectedProvinceLabel = this.regionData.find(item => item.value === this.selectedProvince)?.label || '';
            const selectedCityLabel = this.cityData.find(item => item.value === this.selectedCity)?.label || '';
            const selectedDistrictLabel = this.districtData.find(item => item.value === this.selectedDistrict)?.label || '';

            const result = selectedProvinceLabel + ',' + selectedCityLabel + ',' + selectedDistrictLabel
            // const result = {
            //     province: selectedProvinceLabel,
            //     city: selectedCityLabel,
            //     district: selectedDistrictLabel,
            // };
            console.log(result)
            this.$emit("input", result);
        }
    },
};
</script>
<style scoped>
::v-deep .el-select--medium{
    width: 180px;
}
</style>