vue+element省市区三级联动（可直接使用）

旧城等待， 2023-10-10 09:36 13阅读 0赞

$emit：父传子
    props：子传父
    <template>
        <section>
            <el-select v-model="provinceAreaCode" placeholder="请选择" @change="getCityList">
                <el-option
                    v-for="(item,index) in provinceList"
                    :key="index"
                    :label="item.areaName"
                    :value="item.areaCode"
                >
                    {
       { item.areaName }}
                </el-option>
            </el-select>
            <el-select v-model="cityAreaCode" placeholder="请选择" @change="getAreaList">
                <el-option
                    v-for="(item,index) in cityList"
                    :key="index"
                    :label="item.areaName"
                    :value="item.areaCode"
                >
                    {
       { item.areaName }}
                </el-option>
            </el-select>
            <el-select v-model="streetAreaCode" placeholder="请选择">
                <el-option
                    v-for="(item,index) in areaList"
                    :key="index"
                    :label="item.areaName"
                    :value="item.areaCode"
                >
                    {
       { item.areaName }}
                </el-option>
            </el-select>
        </section>
    </template>
    <script>
        /**
         * 省市区三级联动组件
         */
        // 引入AreaApi
        import AreaApi from '@/api/area/index.js'
        export default {
            name: 'Area',
            props: {
                /**
                 * 省
                 */
                province: {
                    type: String,
                    required: false,
                    default: () => null
                },
    
                /**
                 * 市
                 */
                city: {
                    type: String,
                    required: false,
                    default: () => null
                },
    
                /**
                 *  区
                 */
                myArea: {
                    type: String,
                    required: false,
                    default: () => null
                }
            },
            data() {
                return {
                    loading: true,
                    // 省list
                    provinceList: [],
                    // 市list
                    cityList: [],
                    // 区list
                    areaList: [],
                    // 省code
                    provinceAreaCode: this.province,
                    // 市code
                    cityAreaCode: this.city,
                    // 区code
                    streetAreaCode: this.myArea
                }
            },
            watch: {
                /**
                 * 监听省code
                 * @param val
                 */
                provinceAreaCode(val) {
                    this.$emit('update:province', val)
                },
    
                /**
                 * 监听市code
                 * @param val
                 */
                cityAreaCode(val) {
                    this.$emit('update:city', val)
                },
    
                /**
                 * 监听区code
                 * @param val
                 */
                streetAreaCode(val) {
                    this.$emit('update:myArea', val)
                },
    
                /**
                 * 监听省
                 * @param val
                 */
                province(val) {
                    this.provinceAreaCode = val
                    if (val) {
                        this.getCityList(val)
                    }
                },
    
                /**
                 * 监听市
                 * @param val
                 */
                city(val) {
                    this.cityAreaCode = val
                    if (val) {
                        this.getAreaList(val)
                    }
                },
    
                /**
                 * 监听区
                 * @param val
                 */
                myArea(val) {
                    this.streetAreaCode = val
                }
            },
            methods: {
                /**
                 * 获取省
                 */
                getProvince() {
    
                    AreaApi.getAllProvince().then(result => {
    
                        if (result.data.status !== '0000') {
    
                            this.message(result.msg);
                            return false;
                        }
                        this.provinceList = result.data.data;
                    })
                },
    
                /**
                 * 获取市
                 * @param id
                 */
                getCityList(id) {
    
                    this.cityAreaCode = '';
                    this.streetAreaCode = '';
                    AreaApi.getCity(id).then(result => {
                        if (result.data.status !=='0000') {
    
                            this.message(result.msg);
                            return false;
                        }
                        this.cityList = result.data.data
                    })
                },
    
                /**
                 * 获取地区
                 * @param id
                 */
                getAreaList(id) {
                    this.streetAreaCode = '';
                    AreaApi.getArea(id).then(result => {
                        if (result.data.status !== '0000') {
    
                            this.message(result.msg);
                            return false;
                        }
                        this.areaList = result.data.data
                    })
                }
            },
            mounted() {
                this.getProvince()
            },
        }
    </script>
    <style scoped>
    </style>
    
    父文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70][]

![20190924164133575.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 1][]

index.js：请求部分------装成公共组件

/**
     * 区域API
     *
     * @date 2019-07-16
     * @author chenyongzheng
     */
    
    // 引入vue
    import Vue from 'vue'
    
    /**
     * 定义区域请求类
     */
    class AreaApi {
    
        /**
         * 获取所有省
         *
         * @returns {AxiosPromise}
         */
        static getAllProvince() {
    
            return Vue.prototype.$axios({
                url: `/admin/findAllProvince`,
                method: 'GET'
            })
        }
    
        /**
         * 获取所有市
         *
         * @param id
         * @returns {AxiosPromise}
         */
        static getCity(id) {
    
            return Vue.prototype.$axios({
                url: `/admin/findCityByProvinceCode/${id}`,
                method: 'GET'
            })
        }
    
        /**
         * 获取所有区
         *
         * @param parentCode
         * @returns {AxiosPromise}
         */
        static getArea(parentCode) {
    
            return Vue.prototype.$axios({
                url: `/admin/findLoadByCityCode/${parentCode}`,
                method: 'GET'
            })
        }
    
    }
    
    // 向外暴露AreaApi
    export default AreaApi;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190924164103257.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw,size_16,color_FFFFFF,t_70
[20190924164133575.png]: https://img-blog.csdnimg.cn/20190924164133575.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190924164209383.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw,size_16,color_FFFFFF,t_70