自定义picker组件，无法选择默认值，求解~~

由于我这边是从MUI老项目迁移过来的，再插件市场也下载了几个picker组件，但是数据结构都不一样，没办法直接使用，如果在基础上修改的话，万一插件更新版本后，忘记改了岂不是要死，不得已只能自己造一个了。
在此也不得不吐槽下官方，新框架至少也要照顾下MUI老框架的感受吧，总不能迁移一次还得伤筋动骨的改数据格式吧，前端格式改了还得改后端，老版本就没法做到向下兼容，无奈只能自己按照原有格式重新做。
picker组件是结合uni-popup组件，效果还是挺不错的，数据格式也能按照老项目来做，唯一的遗憾就是没办法自动选中默认值，折腾了几天，实在没招，求大佬解答。

组件源码如下

<template>  
    <view class="page-picker">  
        <view class="picker-title">  
            <text @click="cancel">取消</text>  
            <text @click="confirm">确定</text>  
        </view>  
        <view class="picker-content">  
            <!-- 单列选择 -->  
            <picker-view class="picker-info" indicator-class="picker-one" v-if="columns == 'one'" :value="selectValue" @change="picker_change">  
                <picker-view-column>  
                    <view class="picker-item" v-for="(item, index) in data_list" :key="index">{{item[rangeKey]}}</view>  
                </picker-view-column>  
            </picker-view>  

            <!-- 两列选择 -->  
            <picker-view class="picker-info" indicator-class="picker-two" v-if="columns == 'two'" :value="selectValue" @change="picker_change">  
                <picker-view-column>  
                    <view class="picker-item" v-for="(item, index) in data_list[0]" :key="index">{{item[rangeKey]}}</view>  
                </picker-view-column>  
                <view class="picker-join">{{joinName}}</view>  
                <picker-view-column>  
                    <view class="picker-item" v-for="(item, index) in data_list[1]" :key="index">{{item[rangeKey]}}</view>  
                </picker-view-column>  
            </picker-view>  

            <!-- 三列选择 联动 -->  
            <picker-view class="picker-info" indicator-class="picker-three" v-else-if="columns == 'three'" :value="selectValue" @change="picker_change">  
                <picker-view-column>  
                    <view class="picker-item" v-for="(item, index) in data_list" :key="index">{{item[rangeKey]}}</view>  
                </picker-view-column>  
                <picker-view-column>  
                    <view class="picker-item" v-for="(item, index) in data_list[selectValue[0]].children" :key="index">{{item[rangeKey]}}</view>  
                </picker-view-column>  
                <picker-view-column>  
                    <view class="picker-item" v-for="(item, index) in data_list[selectValue[0]].children[selectValue[1]].children" :key="index">{{item[rangeKey]}}</view>  
                </picker-view-column>  
            </picker-view>  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    name: 'page-picker',  
    props: {  
        //picker列的数量，最多三列  
        columns: {  
            type: String,  
            default: ''  
        },  
        //数据列表  
        data_list: {  
            type: [Array, Object],  
            default(){  
                return {  
                    text: '',  
                    value: ''  
                }  
            }  
        },  
        //显示文本的下标  
        rangeKey: {  
            type: String,  
            default: 'text'  
        },  
        //默认值  
        defaultValue: {  
            type: [Number, Array],  
            default: 0  
        },  
        //多列联结名称  
        joinName: {  
            type: String,  
            default: '-'  
        }  
    },  
    data() {  
        return {  
            selectValue: [] //选中的值  
        };  
    },  
    watch: {  
        columns: {  
            handler(){  
                this.selectValue = this.defaultValue;  
            },  
            immediate: true  
        }  
    },  
    methods: {  
        //改变 picker 选中数据  
        picker_change: function(event){  
            this.selectValue = event.detail.value;  
        },  
        //选择的值  
        confirm: function(){  
            if (this.columns == 'two') {  
                if (this.selectValue[1] <= this.selectValue[0]) {  
                    uni.showModal({  
                        content: '结尾数据要比起始数据大',  
                        showCancel: false  
                    });  
                    return false;  
                }  
            }  
            this.$emit('selected', this.selectValue);  
            this.$parent.close();  
        },  
        //取消选择  
        cancel: function(){  
            this.$emit('cancel');  
            this.$parent.close();  
        }  
    }  
}  
</script>  

<style>  
.page-picker {background-color: #FFF; height: 600rpx;}  
.picker-title {display: flex; justify-content: space-between;}  
.picker-title text {padding: 4vw; width: 20%;}  
.picker-title text:first-child {color: #A1A1A1;}  
.picker-title text:last-child {color: #DD524D; text-align: right;}  
.picker-content {}  
.picker-info {padding: 0 4vw; height: 500rpx;}  
.picker-one {width: 40%; margin: 0 30%;}  
.picker-two {}  
.picker-three {}  
.picker-item {height: 80rpx; line-height: 80rpx; text-align: center;}  
.picker-join {width: 20vw; display: flex; align-items: center; justify-content: center;}  
</style>

调用方法如下

<uni-popup ref="user_age" type="bottom" :custom="true">  
            <page-picker columns="two" :data_list="user_age_option" :defaultValue="user_age_value" joinName="至" @selected="user_age_change"></page-picker>  
        </uni-popup>

数据格式如下

user_age_option = [{  
    text: '18岁',  
    value: 18  
}, {  
    text: '19岁',  
    value: 19  
}, {  
    text: '20岁',  
    value: 20  
}, {  
    text: '21岁',  
    value: 21  
}, {  
    text: '22岁',  
    value: 22  
}, {  
    text: '23岁',  
    value: 23  
}, {  
    text: '24岁',  
    value: 24  
}, {  
    text: '25岁',  
    value: 25  
}]

数据都能正常显示，也可以正常选择，获取选择的值都没问题，唯独默认值没办法直接选中，不管单列、两列、三列都是一样，不知道哪里出问题了，求解，感激不尽，问题解决后，我也发布到插件市场，方便MUI老用户 ~~~