跳转到内容

时间范围选择(扩展)

使用el-date-picker组件封装,用于实现天、周、月、季度、年等不同时间单位的时间范围选择功能。基于时间范围选择器编辑器进行扩展,编辑器样式代码名称为:SWITCHUNIT

示例效果

输入参数

名称说明类型默认值
value编辑器值,该值用于表示时间范围信息,包含几个关键属性:unit(时间单位)、type(类型,可选值为 'DYNAMIC'(动态时间)和 'STATIC'(固定时间))、start(开始时间)、end(结束时间){type: Object as PropType<{unit: 'DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR';type: 'DYNAMIC' | 'STATIC';start: string | number;end: string | number;}>}-
controller编辑器控制器对象new RequiredProp(Object as PropType<C>)-
data容器数据,通常为表单数据,表格行数据,面板数据new RequiredProp(Object as PropType<IData>)-
disabled是否禁用{ type: Boolean }false
readonly是否只读{ type: Boolean, default: false }false
controlParams容器控件参数,一般是指表单部件控件参数、表格控件参数、面板控件参数{ type: Object, required: false }-

事件

名称说明类型
change值变更事件。_value用于表示时间范围信息,包含几个关键属性:unit(时间单位)、type(类型,可选值为 'DYNAMIC'(动态时间)和 'STATIC'(固定时间))、start(开始时间)、end(结束时间){_value:{unit: 'DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR';type: 'DYNAMIC' | 'STATIC';start: string | number;end: string | number;}, _name?:string, _ignore?:boolean}

编辑器参数

名称说明类型默认值
switchunit是否显示时间单位选择功能组件,该组件主要用于切换时间单位,根据不同的时间单位抛出不同的开始与结束时间值booleantrue
defaultunit默认时间单位,配置不同时间单位将展示对应的时间选择组件'DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR''DAY'
emitmode抛值模式。当参数值为 'DEFAULT' 且时间单位为 'DAY' 时,若当前时间为 '2025/04/23',开始时间为 '2025/04/22'、结束时间为 '2025/04/24',此时若时间类型为固定时间,将开始与结束时间的时间戳除以 1000 后按 {start:1745251200,end:1745510399,unit:'DAY',type:'STATIC'} 格式抛值,若为动态时间则按 {start:-1,end:1,unit:'DAY',type:'DYNAMIC'} 格式抛值,以当前时间与开始、结束时间的时间间隔体现;而当参数值为 'TIME' 时,将开始与结束时间按本地时间格式转换为字符串,按 {start:'2025/4/22 00:00:00',end:'2025/4/24 23:59:59',unit:'DAY',type:'STATIC'} 格式抛值'DEFAULT' | 'TIME''DEFAULT'
未来已来,立即拥抱应用融合的力量
Released under the MIT License.