Skip to content

Select 下拉选择框

规则

基础示例

Props 配置示例

单选下拉框

多选下拉框

可搜索下拉框

远程搜索(模拟接口)

Events 事件示例

监听选择变化

选择后联动更新其他字段

完整配置项:TDesign_Select

valueSelectValue(单选/多选、valueType 不同结构略有差异)

Props

参数说明类型默认值版本
autoWidth宽度随内容自适应booleanfalse-
autofocus自动聚焦booleanfalse-
borderless无边框模式booleanfalse-
clearable是否可清空booleanfalse-
collapsedItems多选折叠项自定义TNode<{ value; collapsedSelectedItems; count; onClose }>--
creatable是否允许用户创建新条目(需 filterable)booleanfalse-
disabled是否禁用boolean--
empty下拉列表为空时显示内容string | TNode--
filter自定义搜索规则(filterWords: string, option: T) => boolean | Promise<boolean>--
filterable是否可搜索booleanfalse-
inputProps透传 Input 属性InputProps--
inputValue输入框的值(v-model:inputValue)InputValue--
defaultInputValue非受控输入框值InputValue--
keysvalue / label / disabled 字段别名KeysType--
label左侧文本string | TNode--
loading加载状态booleanfalse-
loadingText远程加载提示string | TNode--
max多选数量上限(0 不限制)number0-
minCollapsedNum多选折叠阈值number0-
multiple是否多选booleanfalse-
options数据化配置选项(也可用 rule.options)Array<T>--
panelBottomContent面板底部内容string | TNode--
panelTopContent面板顶部内容string | TNode--
placeholder占位符string--
popupProps透传 Popup 属性PopupProps--
popupVisible是否显示下拉(v-model:popupVisible)boolean--
defaultPopupVisible非受控下拉显隐boolean--
prefixIcon前置图标TNode--
readonly只读boolean--
reserveKeyword多选可搜索时选中后是否保留关键词booleanfalse-
scroll懒加载与虚拟滚动InfinityScroll--
selectInputProps透传 SelectInput 属性SelectInputProps--
showArrow是否显示右侧箭头booleantrue-
size尺寸small | medium | largemedium-
status输入框状态default | success | warning | errordefault-
suffix后置内容string | TNode--
suffixIcon后置图标TNode--
tagInputProps透传 TagInput 属性TagInputProps--
tagProps透传 Tag 属性TagProps--
tips下方提示文本string | TNode--
value选中值SelectValue--
defaultValue非受控选中值SelectValue--
valueDisplay自定义选中项呈现string | TNode<{ value; onClose; displayValue? }>--
valueType选中值类型value | objectvalue-

Events

事件说明类型版本
blur输入框失去焦点(context: { value: SelectValue; e: FocusEvent | KeyboardEvent }) => void-
change选中值变化(value: SelectValue, context: { option?: T; selectedOptions: T[]; trigger: SelectValueChangeTrigger; e?: MouseEvent | KeyboardEvent }) => void-
clear点击清除按钮(context: { e: MouseEvent }) => void-
create选择新创建的条目(value: string | number | boolean | bigint) => void-
enter回车(context: { inputValue: string; e: KeyboardEvent; value: SelectValue }) => void-
focus获得焦点(context: { value: SelectValue; e: FocusEvent | KeyboardEvent }) => void-
inputChange输入框值变化(value: InputValue, context?: SelectInputValueChangeContext) => void-
popupVisibleChange下拉显示/隐藏(visible: boolean, context: PopupVisibleChangeContext) => void-
remove多选移除选中项(options: { value: string | number | bigint; data: T; e: MouseEvent | KeyboardEvent }) => void-
search输入变化触发搜索(远程搜索)(filterWords: string, context: { e: KeyboardEvent }) => void-

FormCreate 是一个开源项目,基于 MIT 许可证发布,欢迎个人和企业用户免费使用