# t-picker

Picker 选择器

t-picker 组件介绍

多列滚动选择器组件，用于选项滚轮选择与结果确认。

t-picker 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-picker 基础用法

<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mb-15"
				title="Picker 选择容器"
				sub-title="组件内部是canvas绘制，只会绘制可见的几项数据"></t-card>
		<t-section title='基础使用-数据不关联(自由控制)'
				   class="mb-15"></t-section>
		<t-picker @change="pickerchange"
				  :columns="3"
				  titleKey="title"
				  ref="pickerins"></t-picker>
		<t-section title='选中的值'
				   class="mb-15"></t-section>
		<view class="r-10 tdb mb-15 tdp fww">
			<t-button @click="updateList"
					  class="mb-15"
					  type='success'>修改第三列列表</t-button>
		</view>
		<t-section title='数据关联用法见日期选择和城市选择组件'
				   class="mb-15"></t-section>
		<view class="r-10 tdb mb-15 tdp">
			<t-button type="primary"
					  class="mb-15 "
					  path="/demo/picker-date/picker-date">日期选择组件</t-button>
			<t-button type='success'
					  path="/demo/picker-city/picker-city.uvue">城市选择组件</t-button>
		</view>
	</view>
</template>
<script setup>
	// 将选择的值也初始化为空数组
	const pickerins = ref<ComponentPublicInstance | null>(null)
	const province = ref<UTSJSONObject[]>([
		{ partenid: "0", id: "1", title: '四川省' },
		{ partenid: "0", id: "2", title: '重庆市' },
		{ partenid: "0", id: "3", title: '广东省' },
		{ partenid: "0", id: "4", title: '上海市' }
	]);

	const city = ref<UTSJSONObject[]>([
		{ partenid: "1", id: "11", title: '成都市' },
		{ partenid: "1", id: "12", title: '绵阳市' },
		{ partenid: "2", id: "21", title: '渝中区' },
		{ partenid: "2", id: "22", title: '江北区' },
		{ partenid: "3", id: "31", title: '广州市' },
		{ partenid: "3", id: "32", title: '深圳市' },
		{ partenid: "4", id: "41", title: '黄浦区' },
		{ partenid: "4", id: "42", title: '徐汇区' }
	]);

	const area = ref<UTSJSONObject[]>([
		{ partenid: "11", id: "111", title: '武侯区' },
		{ partenid: "11", id: "112", title: '青羊区' },
		{ partenid: "12", id: "121", title: '涪城区' },
		{ partenid: "12", id: "122", title: '游仙区' },
		{ partenid: "21", id: "211", title: '解放碑街道' },
		{ partenid: "21", id: "212", title: '南岸区' },
		{ partenid: "22", id: "221", title: '观音桥街道' },
		{ partenid: "22", id: "222", title: '江北城街道' },
		{ partenid: "31", id: "311", title: '越秀区' },
		{ partenid: "31", id: "312", title: '天河区' },
		{ partenid: "32", id: "321", title: '福田区' },
		{ partenid: "32", id: "322", title: '罗湖区' },
	])
	const area1 = ref<UTSJSONObject[]>([
		{ partenid: "41", id: "411", title: '外滩街道' },
		{ partenid: "41", id: "412", title: '南京东路街道' },
		{ partenid: "42", id: "421", title: '徐家汇街道' },
		{ partenid: "42", id: "422", title: '漕河泾街道' }
	]);
	const pickerIds = ref<string[]>(['', '', ''])
	function pickerchange(e : UTSJSONObject) {
		console.log(e)
	}
	function updateList() {
		pickerins.value?.$callMethod('updateList', 2, area1.value, 1)
	}
	function updateValue() {

	}
	function updArrteAValue() {

	}
	onReady(() => {
		setTimeout(() => {
			//第一个参数为绘制的列，第二个参数为绘制的数据列表，第三个参数为滚动到第几项
			pickerins.value?.$callMethod('updateList', 0, province.value, 0)
			pickerins.value?.$callMethod('updateList', 1, city.value, 0)
			pickerins.value?.$callMethod('updateList', 2, area.value, 0)
		}, 100)
	})
</script>

t-picker Props

属性名	类型	默认值	说明	可选值
columns	Number	3	列数	-
rowHeight	Number	50	行高	-
titleKey	String	"name"	显示字段的key	-
indexKey	String	"id"	索引字段的key	-

t-picker Events

事件名	说明	回调参数
change	选择变化时触发	选择结果
animationfinish	动画结束时触发	-

Methods

方法名	说明	参数	返回值
setData	设置选择器数据	columnIndex: number, data: Array	无
getValue	获取当前选择值	无	选择结果