当前位置：首页 > news >正文

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

news 2026/3/26 23:29:12

在使用 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'// 指定结束日期字段}}]

完整示例

<template><div>å<vxe-formv-bind="formOptions"><template#action><vxe-buttontype="reset">重置</vxe-button><vxe-buttontype="submit"status="primary">提交</vxe-button></template></vxe-form></div></template><scriptsetup>import{reactive}from'vue'constformOptions=reactive({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>