index.vue

<template>
    <div>
        <el-select v-model="formData.country">
            <el-option v-for="(item) in treeList" :value="item.id" :label="item.titleZh" :key="item.id" />
        </el-select>
        <el-select v-model="formData.province">
            <el-option v-for="(item) in provinceList" :value="item.id" :label="item.titleZh" :key="item.id" />
        </el-select>
        <el-select v-model="formData.city">
            <el-option v-for="(item) in cityList" :value="item.id" :label="item.titleZh" :key="item.id" />
        </el-select>
    </div>
</template>
<script>
import { getListTree } from "@/api/ecw/region";

export default {
    data(){
        return {
            formData:{

            },
            treeList: [],
            provinceList: [],
            cityList:[]
        }
    },
    watch:{
        'formData.city'(city){
            this.$emit('cityChange', city)
        },
        'formData.country'(country){
            this.$emit('countryChange', country)
            this.treeList.forEach(item => {
                if(item.id == country){
                    this.provinceList = item.children || []
                }
            })
        },
        'formData.province'(province){
            this.$emit('provinceChange', province)
            this.provinceList.forEach(item => {
                if(item.id == province){
                    this.cityList = item.children || []
                }
            })
        }
    },
    created(){
        getListTree({treeType: 1}).then(response => {
            this.treeList = response.data
        })
    }
}
</script>