vant组件省市区三级联动下拉

环境：原生微信小程序
组件：u-picker

ui库为uView2
view需要用v-if清除组件，否则二次打开picker的位置会乱。

<template>
    <view v-if="consigneeAreaShow">
        <u-picker :closeOnClickOverlay="true" :show="consigneeAreaShow" @close="consigneeAreaShow = false"
            @cancel="consigneeAreaShow = false" @confirm="consigneeAreaSure" @change="consigneeAreaChange"
            :columns="selectTreeColumns" :keyName="selectKeyName" raf="areaPicker" />
    </view>

</template>

<script>
    import {
        areaTreeAPI
    } from "@/api/orders/index.js"
    export default {
        data() {
            return {
                consigneeAreaShow: false,
                selectKeyName: 'name',
                selectTreeColumns: [],
                areaTree: [],
            }
        },
        methods: {
            // 确定收货区域
            consigneeAreaSure(e) {
                let {
                    value
                } = e;
                this.consigneeAreaShow = false; // 关闭picker
                // 确定选择后返回选择结果
                this.$emit('submit', value)
            },
            // 收货区域变化
            consigneeAreaChange(e) {
                const {
                    columnIndex, // 当前变化的column-index,省变化0 市变化1 区变化2
                    value, // 当前的所有column值，为数组, 0号省 1号市 2号区
                    values, // values为当前u-picker绑定的原始值
                    index, // 当前变化的column中的值的index,例如省变化，省变为浙江，index就为浙江在省数组中的index
                    // 微信小程序无法将picker实例传出来，只能通过ref操作
                    picker = this.$refs.areaPicker
                } = e
                // 省变化，重置市、区
                if (columnIndex == 0) {
                    // 通过setColumnValues事件修改picker中具体column的值
                    picker.setColumnValues(1, values[0][e.index].children)
                    picker.setColumnValues(2, values[0][e.index].children[0].children)
                } else if (e.columnIndex == 1) {
                    // 市变化，重置区
                    picker.setColumnValues(2, values[1][e.index].children)
                }
            },
            // 区域树
            async open() {
        // 是否查询过areaTreeAPI接口，如果查询过就不用再次查询了
        // 只要组件没被销毁，数据是会被缓存的
                if (this.areaTree.length == 0) {
                    // 获取省市区树
                    let res = await areaTreeAPI();
                    this.areaTree = res.data;
                    // picker显示的中文名key
                    this.selectKeyName = 'name';
                    // 设置二维数组，其中数组0号为省，1号位为市，2号位为区
                    this.selectTreeColumns = [
                        this.areaTree,
                        this.areaTree[0].children,
                        this.areaTree[0].children[0].children,
                    ]
                }
                // 显示picker
                this.consigneeAreaShow = true;
            },
        }
    }
</script>

<style scoped lang="scss">
</style>

页面使用

<SelectArea ref="SelectAreaRef" @submit="consigneeAreaSure"/>

// 选择收货区域
onConsigneeArea() {
      this.$refs.SelectAreaRef.open();
},

// 确定收货区域
consigneeAreaSure(e) {
    console.log('选择结果',e)
},