vue表单vxe-from配置渲染日期范围选择器的用法
<p>在使用 vxe-form 表单配置渲染时，日期范围选择器（VxeDateRangePicker）支持多种数据格式绑定，包括字符串类型、数组类型以及两个独立字段的方式。本文将详细介绍这三种用法的配置方法。</p><h2 id="三种数据绑定方式">三种数据绑定方式</h2>
<p>通过 itemRender.name='VxeDateRangePicker' 指定渲染控件</p>
<h3 id="字符串格式逗号分隔">字符串格式（逗号分隔）</h3>
<p>适用于需要将起止日期以逗号分隔的字符串形式存储的场景。</p>
<pre><code class="language-javascript">data: {
selectDate: '2025-05-10,2025-05-15'// 格式：'开始日期,结束日期'
}
items: [
{
field: 'selectDate', // 字段名
title: '字符串格式',
span: 24,
itemRender: {
name: 'VxeDateRangePicker' // 指定渲染组件
}
}
]
</code></pre>
<h2 id="数组格式">数组格式</h2>
<p>适用于数据需要以数组形式存储的场景，数组包含两个元素，分别代表开始日期和结束日期。</p>
<pre><code class="language-javascript">data: {
dates: ['2025-05-02', '2025-05-08']// 格式：[开始日期, 结束日期]
}
items: [
{
field: 'dates', // 字段名
title: '数组格式',
span: 24,
itemRender: {
name: 'VxeDateRangePicker' // 指定渲染组件
}
}
]
</code></pre>
<h2 id="两个独立字段格式">两个独立字段格式</h2>
<p>适用于开始日期和结束日期分别存储在不同字段的场景，通过 startField 和 endField 属性指定对应的字段名。</p>
<pre><code class="language-javascript">data: {
startDate: '2025-05-01',// 开始日期字段
endDate: '2025-06-20' // 结束日期字段
}
items: [
{
field: '_startAndEnd', // 虚拟字段名，不实际存储数据
title: '2个字段格式',
span: 24,
itemRender: {
name: 'VxeDateRangePicker', // 指定渲染组件
startField: 'startDate', // 指定开始日期字段
endField: 'endDate' // 指定结束日期字段
}
}
]
</code></pre>
<h2 id="完整示例">完整示例</h2>
<p><img src="https://img2024.cnblogs.com/blog/3765549/202603/3765549-20260319141343277-1618161777.png"></p>
<pre><code class="language-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>
</code></pre>
<ul>
<li>注意事项</li>
<li>字符串格式：必须使用逗号分隔，格式为 '开始日期,结束日期'</li>
<li>数组格式：数组长度应为2，依次为开始日期和结束日期</li>
<li>独立字段格式：需要设置一个虚拟的 field 字段（如 _startAndEnd）通过 startField 和 endField 指定实际的存储字段</li>
</ul>
<p>日期格式默认为 yyyy-MM-dd，具体格式可通过组件属性进行配置</p>
<p>https://vxeui.com</p><br><br>
来源：https://www.cnblogs.com/zhiy3/p/19738691
頁:
[1]