你当前查看的文档是tmui3.2.0（已不再支持NVUE）

[tmui3.1.x nvue点我] [tmui4.x uniappx原生开发代替nvue]

表单组件

选择器容器 TmPickerView

可单列或者多列

🌶️ 示例

查看模拟效果－

示例模板

<template>
    <view>
        <tm-sheet>
            <tm-text font-size="36" class=" text-weight-b mb-16 d-block">选择器容器 PickerView</tm-text>
            <tm-text color="#999999" class="text-size-b">
                组件采用数组id式选择，非索引。考虑到实际实用中多以id为交互提交数据。因此摒弃了传统的索引选项
            </tm-text>
        </tm-sheet>

        <tm-sheet>
            <tm-picker-view v-model:model-str="selectedStr" rang-key="code" rang-text="name" @change="change" 
            v-model="selecteds"
                :list="city"></tm-picker-view>
            <!-- list -->
            <tm-sheet :margin="['0', '24', '0', '0']" color="#f5f5f5" dark-color="#333">
                <tm-text color="#999999">选中的值：{{ selecteds.join(',') }}</tm-text>
                <tm-text color="#999999">选中项的文本：{{ selectedStr }}</tm-text>
            </tm-sheet>
        </tm-sheet>
        <view style="height:50px"></view>
    </view>
</template>
<script lang="ts" setup>
import { ref } from "vue"
import city from "@/uni_modules/tm-ui/static/pca-code.json"


const selecteds = ref<string[]>([])
const selectedStr = ref("")
const change = (ids: string[]) => {
    console.log(ids)
}
</script>

<style lang="scss"></style>

🌶️ 兼容性

平台兼容

H5	uniAPP	小程序	version
☑️	☑️	☑️	☑️

🌱 参数

参数名	类型	默认值	描述
list	TM_PICKER_ITEM_INFO[]	():TM_PICKER_ITEM_INFO[]=>[]	数据项格式类型为：PICKER_ITEM_INFO
modelValue	Array<string|number>	():string[]=>[]	当前选中项的id值
modelStr	string	""	当前选中项的标题文本组
cellUnits	string[]	():string[]=>[]	显示在顶部的单位名称
fontSize	string	"32"	项目的字体号大小
rangKey	string	"id"	自定义标识id
rangText	string	"title"	自定义标识文本字段名

🌹 事件

事件名	参数	返回数据	描述
change	名称：ids,当前选中项的id,	-	选项变化时触发
update:modelStr	-	-	等同v-model:model-str
只对外输出当前回选区的选中项的文本，不要外部改变此值。
update:modelValue	-	-	-

🌽 slot插槽

插槽名	数据	描述

🥗 ref方法

方法名	参数	返回值	描述
getIndexsByids	-	-	-
getIdsByindexs	-	-	-
getNowCurrent	-	-	-
onInit	-	-	-
clearCache	-	-	-