Tu View Plus

简体中文

English

简体中文

English

Appearance

Select 选择框 ​

当选项过多时，使用下拉菜单展示并选择内容。

基础用法 ​

输入框的基本用法。

禁用状态 ​

为 tu-select 设置 disabled 属性，则整个选择器不可用。

多选选择器 ​

通过设置 multiple，可以让选择器支持多选。此外通过 max-tag-count 可以设置最多显示的标签个数。

请选择
请选择

允许清除 ​

通过设置 allow-clear，显示清除按钮。

请选择

加载中 ​

选择框和下拉菜单显示加载中状态。

选择器页头 ​

自定义下拉菜单的页头。

请选择

选择器页脚 ​

自定义下拉菜单的页脚。

允许创建 ​

通过设置 allow-create ，让选择器可以创建选项中不存在的条目。

请选择

允许搜索 ​

通过设置 allow-search ，可以让选择器支持对选项的搜索，配合 filter-option 可以自定义搜索。

下拉菜单滚动 ​

可以通过 dropdown-scroll 监听下拉菜单的滚动事件。或者通过 dropdown-reach-bottom 监听下拉菜单滚动到底部的事件。

远程搜索 ​

使用 search 事件进行远程搜索，并改变选项。

分组 ​

使用 select-group 组件添加分组选项。

请选择

自定义选择框展示内容 ​

通过 #label 插槽可以自定义选择框展示内容。

联动选择框 ​

展示联动选择框的实现方法。

选项 1-1

自定义字段名 ​

可以通过 field-names 属性自定义 options 中数据的格式。

选项1

虚拟列表 ​

虚拟列表的使用方法。

不同尺寸 ​

选择框分为 mini、small、medium、large 四种尺寸。

请选择

Select API ​

Select Attributes ​

参数名描述类型默认值
multiple是否开启多选模式（多选模式默认开启搜索）Booleanfalse
model-value/v-model绑定值String Number Boolean Object-
default-value默认值（非受控模式）String Number Boolean Object-
input-value输入框的值String-
default-input-value输入框的默认值（非受控模式）String''
size选择框的大小Stringmedium
placeholder占位符String-
loading是否为加载中状态Booleanfalse
disabled是否禁用Booleanfalse
allow-clear是否允许清空Booleanfalse
allow-search是否允许搜索Boolean Objectfalse (single) | true (multiple)
allow-create是否允许创建Booleanfalse
max-tag-count多选模式下，最多显示的标签数量。0 表示不限制Number0
popup-container弹出框的挂载容器String HTMLElement-
default-active-first-option是否在无值时默认选择第一个选项Booleantrue
popup-visible是否显示下拉菜单Boolean-
default-popup-visible弹出框默认是否可见（非受控模式）Booleanfalse
unmount-on-close是否在下拉菜单关闭时销毁元素Booleanfalse
filter-option是否过滤选项Boolean Functiontrue
options选项数据Array[]
virtual-list-props传递虚拟列表属性，传入此参数以开启虚拟滚动 VirtualListPropsVirtualListProps-
trigger-props下拉菜单的触发器属性TriggerProps-
format-label格式化显示内容Function-
show-extra-options是否在下拉菜单中显示额外选项Booleantrue
value-key用于确定选项键值的属性名Stringvalue
search-delay触发搜索事件的延迟时Number500
limit多选时最多的选择个数Number0
field-names自定义 SelectOptionData 中的字段SelectFieldNames-
scrollbar是否开启虚拟滚动条Boolean ScrollbarPropstrue
show-header-on-empty空状态时是否显示headerbooleanfalse
show-footer-on-empty空状态时是否显示footerbooleanfalse

Select Events ​

事件名描述参数
change值发生改变时触发Function
input-value-change输入框的值发生改变时触发Function
popup-visible-change下拉框的显示状态改变时触发Function
clear点击清除按钮时触发-
remove点击标签的删除按钮时触发Function
search用户搜索时触发Function
dropdown-scroll下拉菜单发生滚动时触发-
dropdown-reach-bottom下拉菜单滚动到底部时触发-
exceed-limit多选超出限制时触发Function

Select Slots ​

参数名描述
trigger自定义触发元素
prefix前缀元素
search-icon选择框的搜索图标
loading-icon选择框的加载中图标
arrow-icon选择框的箭头图标
footer下拉框的页脚
header下拉框的页头
label选择框的显示内容
option选项内容
empty选项为空时的显示内容

Select Option Attributes ​

参数名描述类型默认值
value选项值（如不填，会从内容中获取）StringNumberBooleanObject-
label选项标签（如不填，会从内容中获取）String-
disabled是否禁用Booleanfalse
tag-props展示的标签属性TagProps-
extra额外数据，可使用对象形式的 value 扩展数据Object-
index用于手动指定选项的 indexNumber-

Select Group Attributes ​

参数名描述类型默认值
label选项组的标题string-

Select Group Slots ​

参数名描述
label选项组的标题

Type ​

ts
type Option = string | number | SelectOptionData | SelectOptionGroup;

type FilterOption = boolean | ((inputValue: string, option: SelectOptionData) => boolean);
type Option = string | number | SelectOptionData | SelectOptionGroup;

type FilterOption = boolean | ((inputValue: string, option: SelectOptionData) => boolean);

SelectOptionData ​

参数名描述类型默认值
value选项值StringNumberBooleanRecord-
label选项内容String-
disabled是否禁用Booleanfalse
tagProps选项对应的多选标签的属性any-
render自定义渲染RenderFunction-

SelectOptionGroup ​

参数名描述类型默认值
isGroup是否为选项组Boolean-
label选项组标题String-
options选项组中的选项Array-

VirtualListProps ​

参数名描述类型默认值
height可视区域高度StringNumber-
threshold开启虚拟滚动的元素数量阈值，当数据数量小于阈值时不会开启虚拟滚动。Number-
fixedSize元素高度是否是固定的。Booleanfalse
estimatedSize元素高度不固定时的预估高度。Number-
buffer视口边界外提前挂载的元素数量。Number10

FAQ ​

使用 Object 格式作为选项的值 ​

当使用 Object 格式作为选项的值时，需要通过 value-key 属性为选择器指定获取唯一标识的字段名，默认值为 value。 此外 value 的对象值需要在 setup 中定义好，不能够在模版中创建对象，这样会导致 Option 组件的重复渲染。

例如当我需要指定 key 为唯一标识时：

vue
<template>
  <tu-select v-model="value" placeholder="Please select" value-key="key">
    <tu-select-option v-for="item of data" :value="item" :label="item.label" />
  </tu-select>
</template>

<script setup>
import { ref } from 'vue';

const value = ref();
const options = [
  {
    value: 'option1',
    label: 'option1',
    key: 'extra1'
  },
  {
    value: 'option2',
    label: 'option2',
    key: 'extra3'
  },
  {
    value: 'option3',
    label: 'option3',
    key: 'extra3'
  },
]
</script>
<template>
  <tu-select v-model="value" placeholder="Please select" value-key="key">
    <tu-select-option v-for="item of data" :value="item" :label="item.label" />
  </tu-select>
</template>

<script setup>
import { ref } from 'vue';

const value = ref();
const options = [
  {
    value: 'option1',
    label: 'option1',
    key: 'extra1'
  },
  {
    value: 'option2',
    label: 'option2',
    key: 'extra3'
  },
  {
    value: 'option3',
    label: 'option3',
    key: 'extra3'
  },
]
</script>

滚动容器中的下拉菜单分离问题 ​

Select 组件默认没有开启容器滚动的事件监听功能，如果遇到在滚动容器中下拉菜单分离的问题，可以手动开启内部 Trigger 组件的 updateAtScroll 功能。 如果是在全局环境中存在此种情况，可以使用 ConfigProvider 组件默认开启此属性。

vue
<tu-select :trigger-props="{updateAtScroll:true}"></tu-select>
<tu-select :trigger-props="{updateAtScroll:true}"></tu-select>