JEECG-Boot中动态设置表格查询条件的实现方法

在使用JEECG-Boot框架开发时，经常会遇到需要动态设置表格查询条件的情况。本文将以BasicTable组件为例，详细介绍如何正确实现这一功能。

问题背景

在JEECG-Boot的BasicTable组件中，我们通常会通过formConfig配置搜索条件searchFormSchema。当需要根据路由参数动态设置查询条件时，开发者可能会遇到以下情况：

1. 虽然能够成功通过searchFormSchema[8].defaultValue等方式赋值
2. 但页面却无法正确渲染这些动态设置的值

解决方案

方法一：使用setFieldsValue

更可靠的做法是使用表单实例的setFieldsValue方法来动态设置查询条件值：

const { setFieldsValue } = getForm();
setFieldsValue({
  plnbez: matnrStr,
  getri_begin: '2024-12-01',
  getri: '2024-12-01',
  getri_end: '2024-12-01'
});

这种方法直接操作表单实例，能够确保值被正确设置并渲染到界面上。

方法二：响应式更新searchFormSchema

如果需要修改searchFormSchema本身，需要注意以下几点：

1. 确保searchFormSchema是响应式的（使用ref或reactive包装）
2. 修改后需要触发组件的重新渲染
3. 在适当的生命周期钩子中进行修改（如onMounted）

const searchFormSchema = ref([...]);

onMounted(() => {
  searchFormSchema.value[8].defaultValue = '动态值';
});

实现原理

JEECG-Boot的BasicTable组件内部使用了Ant Design Vue的表单组件。表单值的绑定和渲染机制遵循以下原则：

1. 初始值优先从defaultValue获取
2. 运行时值由表单实例管理
3. 直接修改schema可能不会触发响应式更新

因此，通过表单实例的方法来修改值是最可靠的方式，因为它会：

• 更新表单内部状态
• 触发重新渲染
• 保持数据一致性

最佳实践

1. 对于静态初始值，可以在searchFormSchema中配置defaultValue
2. 对于动态初始值，建议在组件挂载后使用setFieldsValue设置
3. 对于运行时动态修改，优先使用表单实例方法
4. 如果需要修改schema结构，确保使用响应式数据并触发更新

总结

在JEECG-Boot项目中动态设置表格查询条件时，理解表单值的绑定机制至关重要。通过本文介绍的两种方法，开发者可以灵活应对各种动态设置查询条件的场景，确保界面正确渲染和功能正常运作。