<template>
    <view>
        <view>
            <picker :range="years" @change="yearChange">
                {{ years[yearsIndex] }} 
            </picker>
        </view>
    </view>
    
</template>

<script>
    export default {
        data()  {
            return {
                years:["请选择年份",1998,1999,2000],
                yearsIndex:0
            }
        },
        methods:{
            yearChange:function(e){
                console.log(e)
                //获得对象的 detail的 value
                //通过数组的下标改变显示在页面的值
                this.yearsIndex = e.detail.value;
            }
        }
    }
</script>

<style>

</style>

<template>
    <view>
    <!--     <view>
            <picker :range="years" @change="yearChange">
                {{ years[yearsIndex] }} 
            </picker>
        </view>     -->
        
        <!-- mode="multiSelector" 多列选择器 -->
            <view>
                <picker :range="years" @change="yearChange" mode="multiSelector">
                    {{  years[0][yearsIndex1] }} --- {{ years[1][yearsIndex2]  }}
                </picker>
            </view>
        </view>
    </view>
    
</template>

<script>
    export default {
        data()  {
            return {
                years:[
                    ["请选择年份", 1998, 1999, 2000],
                    ["请选择日期", 11, 12, 13]
                ],
                yearsIndex1: 0,
                yearsIndex2: 0
            }
        },
        methods:{ 
            yearChange:function(e){
                console.log(e)
                //获得对象的 detail的 value
                //通过数组的下标改变显示在页面的值
                this.yearsIndex1 = e.detail.value[0];
                this.yearsIndex2 = e.detail.value[1];
            }
        }
    }
</script>

<style>

</style>

转载-原文更详细