Skip to content
On this page
你当前查看的文档是tmui3.2.0(已不再支持NVUE)
[tmui3.1.x nvue点我] [tmui4.x uniappx原生开发代替nvue]

常用组件

搜索选择 TmPickerSelected

弹层式大数据列表筛选,搜索。可异步加载数据。可针对本地搜索及异步搜索加载数据,虚拟列表支持。

🌶️ 示例

查看模拟效果
示例模板
vue
<template>
    <view>
        <tm-sheet>
            <tm-text font-size="36" class=" text-weight-b mb-8 d-block">搜索选择器 tmPickerSelected</tm-text>
            <tm-text color="#999999" class="text-size-b">
                可以对提供的列表数据进行搜索,远程加载,单选多选
            </tm-text>
        </tm-sheet>
        <tm-sheet>

            <tm-picker-selected v-model="codes" v-model:model-str="codes_str" filterKey='name' labelKey="name" idKey="code" :list="city">
                <tm-button :block="true">打开选项</tm-button>
            </tm-picker-selected>
			
			<tm-sheet :margin="[0,15,0,0]" color="info">
				{{codes}}
			</tm-sheet>
			<tm-sheet :margin="[0,15,0,0]" color="info">
				{{codes_str}}
			</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 codes = ref<number[]>([])
const codes_str = ref<string[]>([])

</script>

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

🌶️ 兼容性

平台兼容

H5uniAPP小程序version
☑️☑️☑️☑️

🌱 参数

参数名类型默认值描述
modelValueArray<string | number>()=>[]当前选中的数据,any数组string[],number[]否则报错,无法运行。
modelShowbooleanfalse当前打开的状态。等同v-model:model-show
modelStrArray<string[]>()=>[]回显当前选中的文本,只输出等同v-model:model-str
titlestring"请选择"顶部标题
filterKeystring"text"搜索的字段名称
labelKeystring"text"显示文本的字段
idKeystring"id"列表字段的唯一标识注意它的数据是number类型.
listArray<Record<string, any>>()=>[]数据列表。
localSearchbooleantrue默认采用本地对list的结果集进行筛选搜索。如果禁用,你可以自行通过search事件来搜索并赋值给list更新结果。
multiplebooleantrue是否允许多选
lazyContentbooleanfalse是否懒加载内部内容。当前你的列表内容非常多,且影响打开的动画性能时,请务必设置此项为true,以获得流畅视觉效果。
lazyDurationnumber100lazyContent的延迟时间单位ms如果你的app效果不行,请加大此值

🌹 事件

事件名参数返回数据描述
search名称:keyword,搜索的关键词,-搜索时触发
confirm名称:ids,选中的ids结果集,名称:data,选中的数据结果集,-确认选择时触发
cancel--取消搜索时触发
open--显示弹层时触发,可以用来在此第一次加载list异步数据。
update:modelShow--变量控制打开状态等同v-model:model-show
update:modelStr--自动回显文本数组,此属性只对外输出。
update:modelValue---

🌽 slot插槽

插槽名数据描述
default--

🥗 ref方法

方法名参数返回值描述