uniapp 省市区地区选择

1、新建组件pickerAddress.vue

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

<script>
    import AllAddress from '../common/area.js'
    let selectVal = ['','','']
    
    export default {
        data() {
            return{
                value: [0,0,0],
                array: [],
                index: 0
            }
        },
        created() {
            this.initSelect()
        },
        methods:{
            // 初始化地址选项
            initSelect() {
                this.updateSourceDate() // 更新源数据
                .updateAddressDate() // 更新结果数据
                //.$forceUpdate()  // 触发双向绑定
            },
            // 地址控件改变控件
            columnchange(d) {
                this.updateSelectIndex(d.detail.column, d.detail.value) // 更新选择索引
                .updateSourceDate() // 更新源数据
                .updateAddressDate() // 更新结果数据
                .$forceUpdate()  // 触发双向绑定
            },
            
            /**
             * 更新源数据
             * */
            updateSourceDate() {
                this.array = []
                this.array[0] = AllAddress.map(obj => {
                    return {
                        name: obj.name
                    }
                })
                this.array[1] = AllAddress[this.value[0]].city.map(obj => {
                    return {
                        name: obj.name
                    }
                })
                this.array[2] = AllAddress[this.value[0]].city[this.value[1]].area.map(obj => { 
                    return {
                        name: obj
                    }
                })
                return this
            },
            
            /**
             * 更新索引
             * */
            updateSelectIndex(column, value){
                let arr = JSON.parse(JSON.stringify(this.value)) 
                arr[column] = value
                if(column === 0 ) {
                    arr[1] = 0
                    arr[2] = 0
                }
                if(column === 1 ) {
                    arr[2] = 0
                }
                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('areachange', {
                    index: this.value,
                    data: selectVal
                })
                return this
            }
            
        }
    }
</script>

<style>
</style>

2、模版中引入组件

import pickerAddress from '/components/pickerAddress.vue';

components: {
            mytabbar,
            tab,
            pickerAddress
        },

3、页面中使用组件

<pickerAddress @areachange="areachange">{{area}}</pickerAddress>

4、方法

areachange(e){
                this.area=e.data.join(' ');
            },