uniapp picker使用

//用法示例1
//range 绑定的数组  range-key你想在弹出框中显示数组的哪个key值
<template>
	<view class="signUp_box">
       <view class="item">
			<text>分组：</text>
			<view class="uni-list">
				<picker @change="pickerEventGroup($event)" mode='selector' 
                   :range="groupList" range-key="groupByName" :value="index">
			        <view class="picker">
                        {{formData.groupByName?formData.groupByName:'请选择组'}
                    </view>
				</picker>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
				groupList: [],
                formData: {
					groupById: '',
					groupByName: ''
			   },
			}
		},
		methods: {
			//选择分组
			pickerEventGroup(e) {
				let index = e.target.value;
				this.formData.groupByName = this.groupList[index].groupByName;
				this.formData.groupById = this.groupList[index].id;
			},
		}
	}
</script>

​

<!--用法示例2 -->
<picker @change="pickerEventCatergroy($event)" mode='selector' :range="eventCatergroyList"
 range-key="reportType">
	<view class="picker">
        {{eventCatergroyItem.reportType?eventCatergroyItem.reportType:'请选择事件类型'}}
	 </view>
</picker>
export default {
    data(){
      return{
          eventCatergroyList: [],
		  eventCatergroyItem: {},
      }
    },
    methods:{
       	pickerEventCatergroy(e) {
			this.eventCatergroyItem = this.eventCatergroyList[e.target.value];
		},
    }
}