TimeSelect 时间选择
该组件是低代码平台中用于从预设时间列表中快速选择一个时间点的表单项,基于 Element Plus 的 <el-time-select> 封装,适用于固定时间段、固定间隔(如每30分钟)的场景,常用于预约、排班等业务,并深度集成表单容器(<el-form>)的数据绑定与校验体系。
基础属性
| 属性 | 类型 | 说明 |
|---|---|---|
是否支持一键清空 clearable | boolean | 显示“×”按钮,点击清空已选时间(默认开启) |
文本框是否可输入 editable | boolean | 允许用户手动输入时间(默认开启;若关闭则只能从下拉列表选择) |
是否在选项中包含 end includeEndTime | boolean | 是否将 end 时间本身作为可选项(默认包含) |
开始时间 start | string | 可选时间范围的起始点(格式如 '09:00',默认 '09:00') |
结束时间 end | string | 可选时间范围的结束点(格式如 '18:00',默认 '18:00') |
间隔时间 step | string | 时间选项的间隔(格式如 '00:30' 表示每30分钟一项,默认 '00:30') |
最早时间点 minTime | string | 用户不能选择早于此时间的值(如 '10:00') |
最晚时间点 maxTime | string | 用户不能选择晚于此时间的值(如 '17:00') |
时间格式 format | string | 显示和绑定的时间格式(仅支持时分,如 'HH:mm',默认 'HH:mm') |
输入提示文本 placeholder | string | 未选择时的占位提示文字(如 "请选择时间") |
| 表单项基础配置 | — | 包含标签宽度、布局控制等通用表单项设置(来自 formItemBaseDefine) |
⚠️ 注意:
start/end/step共同决定下拉列表中的所有可选项;minTime/maxTime用于动态禁用部分选项,不影响列表生成;- 本组件不支持秒,仅处理
HH:mm格式。
高级属性
| 属性 | 类型 | 说明 |
|---|---|---|
| 表单项高级配置 | — | 包含字段名(prop)、标签文本(label)等核心绑定配置(来自 formItemAdvDefine) |
事件
| 事件 | 触发时机 | 说明 |
|---|---|---|
change | 所选时间发生变化时 | 返回选中的时间字符串(如 "14:30") |
✅ 与 TimePicker 的区别:
TimeSelect:固定选项列表,适合规则时间段;TimePicker:自由选择任意时间,支持禁用逻辑和范围选择。
