index.vue

<template>
    <div>
        <el-select v-model="formData.country" :disabled="readonly">
            <el-option v-for="(item) in treeList" :value="item.id" :label="$l(item, 'title')" :key="item.id" />
        </el-select>
        <el-select v-model="formData.province" class="ml-10" :disabled="readonly">
            <el-option v-for="(item) in provinceList" :value="item.id" :label="$l(item, 'title')" :key="item.id" />
        </el-select>
        <el-select v-model="formData.city" class="ml-10" :disabled="readonly">
            <el-option v-for="(item) in cityList" :value="item.id" :label="$l(item, 'title')" :key="item.id" />
        </el-select>
    </div>
</template>
<script>
import { getListTree } from "@/api/ecw/region";

export default {
    props:{
        country: Number,
        city: Number,
        province: Number,
        readonly: Boolean
    },
    data(){
        return {
            formData:{
                country: undefined,
                province: undefined,
                city: undefined
            },
            treeList: [],
            // provinceList: [],
            // cityList:[]
        }
    },
    watch:{
        city(val){
            this.$set(this.formData, 'city', val)
        },
        province(val){
            this.$set(this.formData, 'province', val)
        },
        country(val){
            this.$set(this.formData, 'country', val)
        },
        'formData.city'(city){
            this.$emit('cityChange', city)
        },
        'formData.country'(country){
            this.$emit('countryChange', country)
        },
        'formData.province'(province){
            this.$emit('provinceChange', province)
        }
    },
    computed:{
        provinceList(){
            if(!this.formData.country) return []
            let country = this.treeList.find(item => item.id == this.formData.country)
            return country && country.children || []
        },
        cityList(){
            if(!this.provinceList.length) return []
            let province = this.provinceList.find(item => item.id == this.formData.province)
            return province && province.children || []
        }
    },
    created(){
        getListTree({treeType: 1}).then(response => {
            this.treeList = response.data
        })
        this.formData = {
            country: this.country,
            province: this.province,
            city: this.city
        }
    }
}
</script>