JEECG-Boot中RangePicker组件setFieldsValue方法使用指南

问题背景

在使用JEECG-Boot 3.7.0版本的BasicTable组件时，开发人员可能会遇到一个常见问题：通过getForm()获取的setFieldsValue方法无法正确为RangePicker类型的日期范围选择器设置值，而普通的Input组件却能正常赋值。

问题分析

RangePicker作为Ant Design的一个复合日期选择组件，其值格式与普通输入框不同。它需要接收一个包含开始日期和结束日期的数组，而不是简单的字符串值。

正确使用方法

1. 值格式要求

为RangePicker赋值时，必须使用数组格式：

setFieldsValue({
  dateRange: ['2024-12-01', '2024-12-31']
});

2. 日期格式配置

在查询表单的JSON配置中，需要明确定义valueFormat属性来指定日期格式：

{
  "field": "dateRange",
  "label": "日期范围",
  "component": "RangePicker",
  "valueFormat": "YYYY-MM-DD"
}

3. 默认值设置

也可以在JSON配置中直接设置默认值：

{
  "field": "dateRange",
  "label": "日期范围",
  "component": "RangePicker",
  "valueFormat": "YYYY-MM-DD",
  "defaultValue": ["2024-01-01", "2024-12-31"]
}

实际应用示例

const { setFieldsValue } = getForm();

// 正确设置RangePicker值
setFieldsValue({
  plnbez: '123456', // 普通输入框
  dateRange: ['2024-12-01', '2024-12-31'] // 日期范围选择器
});

注意事项

1. 确保日期格式与valueFormat配置一致
2. 数组中的两个元素分别代表开始日期和结束日期
3. 如果只设置一个日期，另一个位置应为null或undefined
4. 在动态设置值时，确保组件已经完成渲染

通过遵循这些规范，开发人员可以轻松地在JEECG-Boot项目中为RangePicker组件动态设置值，实现更灵活的日期范围选择功能。