Vue表单vxe-form配置渲染日期范围选择器的用法

在使用 vxe-form 表单配置渲染时日期范围选择器VxeDateRangePicker支持多种数据格式绑定包括字符串类型、数组类型以及两个独立字段的方式。本文将详细介绍这三种用法的配置方法。三种数据绑定方式通过 itemRender.name‘VxeDateRangePicker’ 指定渲染控件字符串格式逗号分隔适用于需要将起止日期以逗号分隔的字符串形式存储的场景。data:{selectDate:2025-05-10,2025-05-15// 格式开始日期,结束日期}items:[{field:selectDate,// 字段名title:字符串格式,span:24,itemRender:{name:VxeDateRangePicker// 指定渲染组件}}]数组格式适用于数据需要以数组形式存储的场景数组包含两个元素分别代表开始日期和结束日期。data:{dates:[2025-05-02,2025-05-08]// 格式[开始日期, 结束日期]}items:[{field:dates,// 字段名title:数组格式,span:24,itemRender:{name:VxeDateRangePicker// 指定渲染组件}}]两个独立字段格式适用于开始日期和结束日期分别存储在不同字段的场景通过 startField 和 endField 属性指定对应的字段名。data:{startDate:2025-05-01,// 开始日期字段endDate:2025-06-20// 结束日期字段}items:[{field:_startAndEnd,// 虚拟字段名不实际存储数据title:2个字段格式,span:24,itemRender:{name:VxeDateRangePicker,// 指定渲染组件startField:startDate,// 指定开始日期字段endField:endDate// 指定结束日期字段}}]完整示例templatedivåvxe-formv-bindformOptionstemplate#actionvxe-buttontypereset重置/vxe-buttonvxe-buttontypesubmitstatusprimary提交/vxe-button/template/vxe-form/div/templatescriptsetupimport{reactive}fromvueconstformOptionsreactive({titleWidth:120,data:{name:test1,nickname:Testing,sex:,selectDate:2025-05-10,2025-05-15,dates:[2025-05-02,2025-05-08],startDate:2025-05-01,endDate:2025-06-20,address:},items:[{field:name,title:名称,span:24,itemRender:{name:VxeInput}},{field:selectDate,title:字符串格式,span:24,itemRender:{name:VxeDateRangePicker}},{field:dates,title:数组格式,span:24,itemRender:{name:VxeDateRangePicker}},{field:_startAndEnd,title:2个字段格式,span:24,itemRender:{name:VxeDateRangePicker,startField:startDate,endField:endDate}},{align:center,span:24,slots:{default:action}}]})/script注意事项字符串格式必须使用逗号分隔格式为 ‘开始日期,结束日期’数组格式数组长度应为2依次为开始日期和结束日期独立字段格式需要设置一个虚拟的 field 字段如 _startAndEnd通过 startField 和 endField 指定实际的存储字段日期格式默认为 yyyy-MM-dd具体格式可通过组件属性进行配置https://vxeui.com