TPicker 数据选择器

TPicker canvas绘制选择数据的组件，支持多种配置，包括行高、指示器类名、列数、标题键和值。

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例（省市区联动）

<template>
	<t-page title="Picker" class="p.30">
		<t-card class="mb.30" title="Picker 选择容器" sub-title="Canvas绘制更快渲染速度,自研滚动算法不会在滚动结束的时候回弹"></t-card>
		<t-section title='基础使用-数据不关联(自由控制)' class="mb.30"></t-section>
		<t-picker class="tdr-mb.30" @change="pickerchange" :value="pickerIds" ref="pickerIns">
			<t-picker-column :list="province"></t-picker-column>
			<t-picker-column :list="city"></t-picker-column>
			<t-picker-column :list="area"></t-picker-column>
		</t-picker>
		<t-section title='选中的值' class="mb.30"></t-section>
		<t-col class="tdr-tdb-mb.30-tdp">
			<t-text>选中的ID：{{pickerIds1}}(数据库存储使用)</t-text>
			<t-text>选中Value：{{pickerValue}}</t-text>
		</t-col>
		<t-row class="tdr-tdb-mb.30-tdp-ffww">
			<t-button @click="updateList" type='s'>修改第三列数据</t-button>
		</t-row>
		<t-section title='数据关联用法见日期选择和城市选择组件' class="mb.30"></t-section>
		<t-row class="tdr-tdb-mb.30-tdp-ffww">
			<t-button class="mr.15" path="/pages/component/form/datetime-picker/datetime-picker">日期选择组件</t-button>
			<t-button type='s' path="/pages/component/form/pca-picker/pca-picker">城市选择组件</t-button>
		</t-row>
	</t-page>
</template>

<script setup>
	import { TuiPickerColumnChange } from '@/uni_modules/t-ui'
	const pickerIns = ref<TPickerComponentPublicInstance | null>(null)
	const province = [
		{ id: "1", title: '四川省' },
		{ id: "2", title: '重庆市' },
		{ id: "3", title: '广东省' }, // 广州是广东省的一个城市
		{ id: "4", title: '上海市' }
	];

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

	const area = ref([
		{ cityId: "11", id: "111", title: '武侯区' },
		{ cityId: "11", id: "112", title: '青羊区' },
		{ cityId: "12", id: "121", title: '涪城区' },
		{ cityId: "12", id: "122", title: '游仙区' },
		{ cityId: "21", id: "211", title: '解放碑街道' },
		{ cityId: "21", id: "212", title: '南岸区' },
		{ cityId: "22", id: "221", title: '观音桥街道' },
		{ cityId: "22", id: "222", title: '江北城街道' },
		{ cityId: "31", id: "311", title: '越秀区' },
		{ cityId: "31", id: "312", title: '天河区' },
		{ cityId: "32", id: "321", title: '福田区' },
		{ cityId: "32", id: "322", title: '罗湖区' },
	])
	const area1 = [
		{ cityId: "41", id: "411", title: '外滩街道' },
		{ cityId: "41", id: "412", title: '南京东路街道' },
		{ cityId: "42", id: "421", title: '徐家汇街道' },
		{ cityId: "42", id: "422", title: '漕河泾街道' }
	]
	const pickerIds = ref<string[]>(['3', '32', '322'])
	const pickerIds1 = ref<string[]>(['3', '32', '322'])
	const pickerValue = ref<string[]>([])
	function pickerchange(e : Array<TuiPickerColumnChange | null>) {
		const val : string[] = []
		const ids : string[] = []
		e.forEach((k) => {
			const item = k!.item
			val.push(`${item['title']}`)
			ids.push(`${item['id']}`)
		})
		pickerValue.value = val
		pickerIds1.value = ids
	}
	function updateList() {
		pickerIns.value!.updateColounmValue(2, area1)
	}
</script>

Props

名称	描述	类型	默认值
rowHeight	每行的高度，单位为像素	Number	50
indicatorClass	指示器的类名	String	''
titleKey	标题的键名，用于从数据项中提取显示的标题	String	'title'
indexKey	值的键名，用于从数据项中提取用于绑定的值	String	'id'
value	绑定的值，为数组，每个元素对应一列的选中值	String[]	[]

Events

名称	描述	参数
change	当列的选中值发生变化时触发	选中值的数组

Methods

名称	描述	参数
updateColounmValue	更新指定列的数据	col: number, list: UTSJSONObject[]
init	初始化子组件实例	child: TPickerColumnComponentPublicInstance