uniapp 省市区联动 自定义数据源

支持微信小程序 APP上测试通过

数据源采用一次行请求接口返回的所有的省，所有的市，所有的区，其他的省id 市id 区id  对应的改造即可。

isCity：表示是否选择市

isArea：表示是否选择区

所需要的数据格式

新建组件choose-area.vue

<template>
    <uni-popup ref="provincePopup" type="bottom" :maskClick="true">
        <view class="popup">
            <view class="picker-btn">
                <view class="left" @click="cancel">取消</view>
                <view class="right" @click="confirm">确定</view>
            </view>
            <picker-view :value="valueArr" @change="bindChange">
                <picker-view-column>
                    <view class="item" v-for="(item,index) in province" :key="index">{{item.name}}</view>
                </picker-view-column>
                <picker-view-column v-if="isCity">
                    <view class="item" v-for="(item,index) in citys" :key="index">{{item.name}}</view>
                </picker-view-column>
                <picker-view-column v-if="isArea">
                    <view class="item" v-for="(item,index) in areas" :key="index">{{item.name}}</view>
                </picker-view-column>
            </picker-view>
        </view>
    </uni-popup>
</template>

js部分，主要是提前拿到省市区的数据，存起来使用

import uniPopup from './uni-popup/uni-popup.vue';
    import * as Api from '@/common/api.js';
    export default {
        props:{
            isCity:{
                type:Boolean,
                default:true
            },
            isArea:{
                type:Boolean,
                default:true
            }
        },
        components: {
            uniPopup
        },
        data() {
            return {
                valueArr: [0, 0, 0], // 用于判断当前滑动的是哪一列
                province:uni.getStorageSync('chooseCity').provinces, // 省数据列表
                citys:[],
                areas:[],
            }
        },
        mounted() {
            this.initCity(this.province[0].id);
            this.initArea(uni.getStorageSync('chooseCity').citys[0].id);
        },
        methods: {
            initCity(provinceCode){
                let defaultCitys = uni.getStorageSync('chooseCity').citys;
                this.citys = defaultCitys.filter(item=>{
                    return item.pid == provinceCode
                })
            },
            initArea(cityCode){
                let defaultAreas = uni.getStorageSync('chooseCity').areas;
                this.areas = defaultAreas.filter(item=>{
                    return item.pid == cityCode
                })
            },
            bindChange(e) {
                let defaultCitys = uni.getStorageSync('chooseCity').citys;
                const val = e.detail.value;
                console.log(val); //【省，市，区】
                this.valueArr = val;
                // 对应的省份
                let provinceCode = this.province[val[0]].id;
                this.initCity(provinceCode);
                // 对应的市
                if(this.isCity){
                    let cityCode = this.citys[val[1]].id;
                    this.initArea(cityCode);
                }
            },
            toggleTab() {
                this.$refs.provincePopup.open();
            },
            cancel() {
                this.$refs.provincePopup.close();
            },
            confirm:function(){
                console.log("确定",this.valueArr);
                let provinceName = this.province[this.valueArr[0]].name;
                let provinceCode = this.province[this.valueArr[0]].id;
                let cityName = '';
                let cityCode = '';
                let districtName = '';
                let districtCode = '';
                if(this.isCity){
                    cityName = this.citys[this.valueArr[1]].name;
                    cityCode = this.citys[this.valueArr[1]].id;
                }
                if(this.isArea){
                    districtName = this.areas[this.valueArr[2]].name;
                    districtCode = this.areas[this.valueArr[2]].id;
                }
                 
                this.$emit('change',{province:provinceName,provinceCode:provinceCode,city:cityName,cityCode:cityCode,area:districtName,districtCode:districtCode});
                this.cancel();
            },
        }
    }

最后，组件方式引入使用

<choose-area ref="chooseArea" @change="getAddress"></choose-area>

js打开省市区面板

import chooseArea from '../../components/choose-area.vue';
 
export default {
        components:{ chooseArea },
        data(){
            return{
                address:''
            }
        },
        methods:{
            // 打开省市区
            openAddressModal:function(){
                this.$refs.chooseArea.toggleTab();
            },
            // 获取省市区
            getAddress(data){
                console.log(data);
                let { province,city,area } = data;
                this.address = province + city + area;
            }
        }
    }