Select 下拉选择框
规则
基础示例
Props 配置示例
单选下拉框
多选下拉框
可搜索下拉框
远程搜索(模拟接口)
Events 事件示例
监听选择变化
选择后联动更新其他字段
完整配置项:TDesign_Select
value:SelectValue(单选/多选、valueType 不同结构略有差异)
Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| autoWidth | 宽度随内容自适应 | boolean | false | - |
| autofocus | 自动聚焦 | boolean | false | - |
| borderless | 无边框模式 | boolean | false | - |
| clearable | 是否可清空 | boolean | false | - |
| collapsedItems | 多选折叠项自定义 | TNode<{ value; collapsedSelectedItems; count; onClose }> | - | - |
| creatable | 是否允许用户创建新条目(需 filterable) | boolean | false | - |
| disabled | 是否禁用 | boolean | - | - |
| empty | 下拉列表为空时显示内容 | string | TNode | - | - |
| filter | 自定义搜索规则 | (filterWords: string, option: T) => boolean | Promise<boolean> | - | - |
| filterable | 是否可搜索 | boolean | false | - |
| inputProps | 透传 Input 属性 | InputProps | - | - |
| inputValue | 输入框的值(v-model:inputValue) | InputValue | - | - |
| defaultInputValue | 非受控输入框值 | InputValue | - | - |
| keys | value / label / disabled 字段别名 | KeysType | - | - |
| label | 左侧文本 | string | TNode | - | - |
| loading | 加载状态 | boolean | false | - |
| loadingText | 远程加载提示 | string | TNode | - | - |
| max | 多选数量上限(0 不限制) | number | 0 | - |
| minCollapsedNum | 多选折叠阈值 | number | 0 | - |
| multiple | 是否多选 | boolean | false | - |
| 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 | 多选可搜索时选中后是否保留关键词 | boolean | false | - |
| scroll | 懒加载与虚拟滚动 | InfinityScroll | - | - |
| selectInputProps | 透传 SelectInput 属性 | SelectInputProps | - | - |
| showArrow | 是否显示右侧箭头 | boolean | true | - |
| size | 尺寸 | small | medium | large | medium | - |
| status | 输入框状态 | default | success | warning | error | default | - |
| 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 | object | value | - |
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 | - |


