微信picker组件-省市区联动

效果图

image.png

html

<view class="item">
                    <view class="name">选择地区</view>
                    <picker
                        class="input"
                        mode="multiSelector"
                        :range="regionList"
                        range-key="value"
                        @change="bindRegionChange"
                        @columnchange="bindMultiPickerColumnChange"
                        :value="areaIndex"
                    >
                        <view v-if="addressDetail.addressArea">
                            {{ addressDetail.addressProvince }}{{ addressDetail.addressCity
                            }}{{ addressDetail.addressArea }}
                        </view>
                        <view v-else class="placeholder">请选择收货地址</view>
                    </picker>
                    <image class="arrow" src="../../static/img/gray-right-icon.png"></image>
                </view>

js

    /**
     * 省市区下标
     */
    areaIndex: Array<number> = [0, 0, 0];

    /**
     * 地区列表
     */
    regionList: Region[][] = [];

    /**
     * 省
     */
    addressProvince: Region[] = [];

    /**
     * 市
     */
    addressCity: Region[] = [];

    /**
     * 区
     */
    addressArea: Region[] = [];

    /**
     * 获取省市区
     */
    async getRegion() {
        const res = await Service.getRegion();
        this.addressProvince = res;
        this.addressCity = res[0].children;
        this.addressArea = res[0].children[0].children;
        this.regionList = [this.addressProvince, this.addressCity, this.addressArea];
    }

   /**
     * 地区回显逻辑-(获取地址详情后调用)
     */
    addressShow() {
        let provinceIndex = this.addressProvince.findIndex(
            (item) => item.id === this.addressDetail.addressProvinceCode,
        );
        this.addressCity = this.addressProvince[provinceIndex].children;
        let cityIndex = this.addressCity.findIndex((item) => item.id === this.addressDetail.addressCityCode);
        this.addressArea = this.addressCity[cityIndex].children;
        let areaIndex = this.addressArea.findIndex((item) => item.id === this.addressDetail.addressAreaCode);
        this.areaIndex = [provinceIndex, cityIndex, areaIndex];
        this.regionList = [this.addressProvince, this.addressCity, this.addressArea];
        this.area = [
            this.addressDetail.addressProvince,
            this.addressDetail.addressCity,
            this.addressDetail.addressArea,
        ];
        this.addressUser = this.addressDetail.addressUser;
    }

   /**
     * 地区change事件
     * @param e 事件对象
     */
    bindRegionChange(e: any) {
        this.areaIndex = e.detail.value;
        this.addressDetail.addressProvinceCode = this.addressProvince[this.areaIndex[0]].id;
        this.addressDetail.addressProvince = this.addressProvince[this.areaIndex[0]].value;
        this.addressDetail.addressCityCode = this.addressCity[this.areaIndex[1]].id;
        this.addressDetail.addressCity = this.addressCity[this.areaIndex[1]].value;
        this.addressDetail.addressAreaCode = this.addressArea[this.areaIndex[2]].id;
        this.addressDetail.addressArea = this.addressArea[this.areaIndex[2]].value;
    }

    /**
     * 列改变触发
     */
    bindMultiPickerColumnChange(e) {
        if (e.detail.column === 0) {
            this.addressCity = [];
            this.addressCity = this.addressProvince[e.detail.value].children;
            this.addressArea = this.addressCity[0].children;
        }
        if (e.detail.column === 1) {
            this.addressArea = this.addressCity[e.detail.value].children;
        }
        this.regionList = [this.addressProvince, this.addressCity, this.addressArea];
    }