使用Picker写出地区选择，选省市区

本文章代码，借鉴了别人博客的内容，然后根据自己的修改，做了调整，原文：uni-app省市区地址选择器 - 前端—小白 - 博客园

第一步：封装一个地区选择器组件，命名为my-picker.vue

html部分：

<view class="my-picker">
        <picker @change="bindPickerChange" 
        @columnchange="columnchange" 
        :range="array" 
        range-key="name" 
        :value="value" 
        mode="multiSelector">
        <slot></slot>
        </picker>

</view>

js部分：

<script>
let selectVal = ['', '', ''];
export default {
    data() {
        return {
            value: [0, 0, 0],   //value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始）
            array: [],
            selected: [0, 0, 0], //被选择的城市id：省id，市id，区id
            index: 0,
            allAddress: []
        };
    },
    created() {},

    mounted() {
        this.getAreaList();
        setTimeout(() => {
            this.initSelect();
        }, 1000);
    },
    methods: {
        // 初始化地址选项
        initSelect() {
            this.updateSourceDate() // 更新源数据
                .updateAddressDate() // 更新结果数据
                .$forceUpdate(); // 触发双向绑定
        },
        // 地址控件改变控件
        columnchange(d) {
            this.updateSelectIndex(d.detail.column, d.detail.value) // 更新选择索引
                .updateSourceDate() // 更新源数据
                .updateAddressDate() // 更新结果数据
                .$forceUpdate(); // 触发双向绑定
        },
        // 更新源数据
        updateSourceDate() {
            let that = this;
            this.array = [];
            this.array[0] = this.allAddress.map(obj => {
                return {
                    name: obj.name,
                    id: obj.id
                };
            });

            this.array[1] = this.allAddress[this.value[0]].children.map(obj => {
                return {
                    name: obj.name,
                    id: obj.id
                };
            });
            this.array[2] = this.allAddress[this.value[0]].children[this.value[1]].children.map(obj => {
                return {
                    name: obj.name,
                    id: obj.id
                };
            });
            return this;
        },
        //更新索引
        updateSelectIndex(column, value) {
            let arr = JSON.parse(JSON.stringify(this.value));
            console.log(arr, 'arr');
            arr[column] = value;
            if (column === 0) {
                arr[1] = 0;
                arr[2] = 0;
                this.selected[0] = this.array[column][value].id;
            }
            if (column === 1) {
                arr[2] = 0;
                this.selected[1] = this.array[column][value].id;
            }
            if (column === 2) {
                this.selected[2] = this.array[column][value].id;
            }
            this.value = arr;
            return this;
        },
        // 更新结果数据
        updateAddressDate() {
            selectVal[0] = this.array[0][this.value[0]].name;
            selectVal[1] = this.array[1][this.value[1]].name;
            selectVal[2] = this.array[2][this.value[2]].name;
            return this;
        },

        //点击确定
        bindPickerChange(e) {
            this.$emit('change', {
                index: this.value,
                data: selectVal,
                selected: this.selected
            });
            return this;
        },
        // 获取地区
        getAreaList() {
            let that = this;

//网络请求，获取城市数据
            this.$api.getAreaList({}, res => {
                if (res.code == 200) {
                    that.allAddress = res.data;
                    that.allAddress.unshift({ name: '请选择', id: 0, children: [] });
                    that.allAddress.map(el => {
                        el.children.unshift({ name: '请选择', id: 0, children: [] });
                        if (el.children != null) {
                            el.children.map(item => {
                                if (item.children != null) {
                                    item.children.unshift({ name: '请选择', id: 0, children: [] });
                                }
                            });
                        }
                    });
                }
            });
        },
        onchange(e) {
            const value = e.detail.value;
        }
    }
};
</script>

城市数据allAddress：[{name:"北京"，id:1,children:[{name:"北京市"，id:12,children：[name:"东城区"，id:112]}]}]类似这种

第二步：导入的你所需要显示地区的组件中。

效果：