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

在使用 vxe-form 表单配置渲染时，日期范围选择器（VxeDateRangePicker）支持多种数据格式绑定，包括字符串类型、数组类型以及两个独立字段的方式。本文将详细介绍这三种用法的配置方法。

三种数据绑定方式

通过 itemRender.name='VxeDateRangePicker' 指定渲染控件

字符串格式（逗号分隔）

适用于需要将起止日期以逗号分隔的字符串形式存储的场景。

javascript 复制代码

data: {
  selectDate: '2025-05-10,2025-05-15'  // 格式：'开始日期,结束日期'
}

items: [
  { 
    field: 'selectDate',           // 字段名
    title: '字符串格式', 
    span: 24, 
    itemRender: { 
      name: 'VxeDateRangePicker'    // 指定渲染组件
    } 
  }
]

数组格式

适用于数据需要以数组形式存储的场景，数组包含两个元素，分别代表开始日期和结束日期。

javascript 复制代码

data: {
  dates: ['2025-05-02', '2025-05-08']  // 格式：[开始日期, 结束日期]
}

items: [
  { 
    field: 'dates',                // 字段名
    title: '数组格式', 
    span: 24, 
    itemRender: { 
      name: 'VxeDateRangePicker'    // 指定渲染组件
    } 
  }
]

两个独立字段格式

适用于开始日期和结束日期分别存储在不同字段的场景，通过 startField 和 endField 属性指定对应的字段名。

javascript 复制代码

data: {
  startDate: '2025-05-01',  // 开始日期字段
  endDate: '2025-06-20'     // 结束日期字段
}

items: [
  { 
    field: '_startAndEnd',           // 虚拟字段名，不实际存储数据
    title: '2个字段格式', 
    span: 24, 
    itemRender: { 
      name: 'VxeDateRangePicker',     // 指定渲染组件
      startField: 'startDate',        // 指定开始日期字段
      endField: 'endDate'             // 指定结束日期字段
    } 
  }
]

完整示例

html 复制代码

<template>
  <div>å
    <vxe-form v-bind="formOptions" >
      <template #action>
        <vxe-button type="reset">重置</vxe-button>
        <vxe-button type="submit" status="primary">提交</vxe-button>
      </template>
    </vxe-form>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const formOptions = 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>

注意事项
字符串格式：必须使用逗号分隔，格式为 '开始日期,结束日期'
数组格式：数组长度应为2，依次为开始日期和结束日期
独立字段格式：需要设置一个虚拟的 field 字段（如 _startAndEnd）通过 startField 和 endField 指定实际的存储字段

日期格式默认为 yyyy-MM-dd，具体格式可通过组件属性进行配置

https://vxeui.com