uniapp 多列picker选择

在这里插入图片描述

代码块

<template>
	<view>
		<h1>多列选择</h1>
		<p>请选择</p>
		<picker :range="Arrays" @change="ArraysChange" mode="multiSelector">
			{{ Arrays[0][optionsIndex1] }} 年 {{ Arrays[1][optionsIndex2]  }} 月 {{ Arrays[2][optionsIndex3]  }} 日
		</picker>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				Arrays: [
					[2022, 2023, 2024, 2025],
					[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
					[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27,
						28, 29, 30
					]
				],
				optionsIndex1: 0,
				optionsIndex2: 0,
				optionsIndex3: 0,
			}
		},
		methods: {
			ArraysChange: function(e) {
				console.log(e)
				this.optionsIndex1 = e.detail.value[0];
				this.optionsIndex2 = e.detail.value[1];
				this.optionsIndex3 = e.detail.value[2];
			}
		}
	}
</script>

<style>

</style>
Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐