JeecgBoot项目中BasicTable组件动态设置查询条件默认值的方法

仲凌毅Kenneth

1231人浏览 · 2025-08-17 09:03:41

仲凌毅Kenneth · 2025-08-17 09:03:41 发布

JeecgBoot项目中BasicTable组件动态设置查询条件默认值的方法

【免费下载链接】JeecgBoot 🔥企业级低代码平台集成了AI应用平台，帮助企业快速实现低代码开发和构建AI应用!前后端分离架构 SpringBoot，SpringCloud、Mybatis，Ant Design4、 Vue3.0、TS+vite！强大的代码生成器让前后端代码一键生成，无需写任何代码! 引领AI低代码开发模式: AI生成->OnlineCoding-> 代码生成-> 手工MERGE，显著的提高效率，又不失灵活~ 项目地址: https://gitcode.com/jeecgboot/JeecgBoot

在企业级应用开发中，表格查询功能是数据展示和筛选的核心需求。JeecgBoot作为一款优秀的企业级低代码开发平台，其BasicTable组件提供了强大的查询表单功能。本文将深入探讨如何在BasicTable组件中动态设置查询条件的默认值，帮助开发者实现更智能、更灵活的数据查询体验。

一、BasicTable查询表单基础结构

BasicTable组件内置了查询表单功能，通过formConfig配置项来定义查询字段。每个查询字段都是一个FormSchema对象，其中defaultValue属性用于设置默认值。

1.1 基础配置示例

const searchFormSchema: FormSchema[] = [
  {
    label: '姓名',
    field: 'name',
    component: 'JInput',
    defaultValue: '默认姓名', // 静态默认值
  },
  {
    label: '性别',
    field: 'sex',
    component: 'JDictSelectTag',
    componentProps: {
      dictCode: 'sex',
      placeholder: '请选择性别',
    },
    defaultValue: '1', // 默认选择男性
  },
  {
    label: '创建时间',
    field: 'createTime',
    component: 'DatePicker',
    defaultValue: dayjs().format('YYYY-MM-DD'), // 默认当天日期
  }
];

1.2 表格配置集成

const { tableContext } = useListPage({
  tableProps: {
    title: '用户列表',
    api: demoListApi,
    columns: columns,
    formConfig: {
      schemas: searchFormSchema,
    },
    useSearchForm: true,
  },
});

二、静态默认值设置方法

2.1 直接设置默认值

最简单的设置方式是在FormSchema中直接定义defaultValue：

{
  field: 'status',
  label: '状态',
  component: 'Select',
  defaultValue: '1', // 启用状态
  componentProps: {
    options: [
      { label: '启用', value: '1' },
      { label: '禁用', value: '0' }
    ]
  }
}

2.2 日期类型默认值

对于日期类型的字段，需要特别注意格式处理：

{
  field: 'startDate',
  label: '开始日期',
  component: 'DatePicker',
  defaultValue: dayjs().startOf('month').format('YYYY-MM-DD'), // 本月第一天
  componentProps: {
    valueFormat: 'YYYY-MM-DD'
  }
}

三、动态设置默认值的核心方法

3.1 使用useForm的setFieldsValue方法

BasicTable组件提供了获取表单实例的方法，可以通过getForm()获取表单操作对象：

const [registerTable, { getForm }] = tableContext;

// 动态设置查询条件默认值
const setQueryDefaultValues = async () => {
  const { setFieldsValue } = getForm();
  await setFieldsValue({
    name: '动态设置的姓名',
    sex: '2', // 女性
    createTime: dayjs().subtract(7, 'day').format('YYYY-MM-DD')
  });
};

3.2 组件挂载时设置默认值

在组件挂载完成后自动设置默认值：

import { onMounted } from 'vue';

onMounted(() => {
  setTimeout(() => {
    setQueryDefaultValues();
  }, 100);
});

3.3 响应式动态设置

根据业务逻辑动态调整默认值：

const dynamicSetDefaults = (params) => {
  const { setFieldsValue } = getForm();
  const defaults = {};
  
  // 根据用户角色设置不同的默认值
  if (params.userRole === 'admin') {
    defaults.status = '1'; // 管理员默认查看启用状态
  } else {
    defaults.status = '0'; // 普通用户默认查看禁用状态
  }
  
  // 根据时间范围设置
  if (params.timeRange === 'week') {
    defaults.startDate = dayjs().startOf('week').format('YYYY-MM-DD');
    defaults.endDate = dayjs().endOf('week').format('YYYY-MM-DD');
  }
  
  setFieldsValue(defaults);
};

四、高级动态设置技巧

4.1 条件性默认值设置

const setConditionalDefaults = (userInfo, pageParams) => {
  const { setFieldsValue, updateSchema } = getForm();
  const defaults = {};
  
  // 根据用户部门设置默认部门
  if (userInfo.department) {
    defaults.department = userInfo.department;
  }
  
  // 根据页面参数设置时间范围
  if (pageParams.timeType === 'custom') {
    defaults.startTime = pageParams.startTime;
    defaults.endTime = pageParams.endTime;
  } else {
    defaults.startTime = dayjs().subtract(1, 'month').format('YYYY-MM-DD');
    defaults.endTime = dayjs().format('YYYY-MM-DD');
  }
  
  // 动态更新表单schema
  updateSchema([
    {
      field: 'status',
      componentProps: {
        disabled: userInfo.role !== 'admin' // 非管理员禁用状态选择
      }
    }
  ]);
  
  setFieldsValue(defaults);
};

4.2 异步获取默认值

从接口异步获取默认值配置：

const setAsyncDefaults = async () => {
  try {
    const { setFieldsValue } = getForm();
    const defaultConfig = await fetchDefaultConfig();
    
    const defaults = {
      category: defaultConfig.defaultCategory,
      priority: defaultConfig.defaultPriority,
      // ...其他字段
    };
    
    await setFieldsValue(defaults);
  } catch (error) {
    console.error('获取默认配置失败:', error);
  }
};

4.3 表单重置时保持动态默认值

const handleReset = async () => {
  const { resetFields, setFieldsValue } = getForm();
  
  // 先重置表单
  await resetFields();
  
  // 然后重新设置动态默认值
  await setDynamicDefaults();
};

// 在表格配置中自定义重置按钮行为
const { tableContext } = useListPage({
  tableProps: {
    // ...其他配置
    actionConfig: {
      resetButtonProps: {
        onClick: handleReset // 自定义重置行为
      }
    }
  },
});

五、实际应用场景示例

5.1 用户偏好设置记忆

// 记忆用户上次的查询条件
const setUserPreferenceDefaults = async () => {
  const { setFieldsValue } = getForm();
  const userPreferences = localStorage.getItem('user_query_preferences');
  
  if (userPreferences) {
    const preferences = JSON.parse(userPreferences);
    await setFieldsValue(preferences);
  } else {
    // 设置系统默认值
    await setFieldsValue({
      pageSize: 20,
      sortField: 'createTime',
      sortOrder: 'descend'
    });
  }
};

// 用户查询时保存偏好
const handleSearch = async (values) => {
  localStorage.setItem('user_query_preferences', JSON.stringify(values));
  // 执行查询操作
};

5.2 路由参数映射默认值

import { useRoute } from 'vue-router';

const setRouteParamDefaults = () => {
  const route = useRoute();
  const { setFieldsValue } = getForm();
  
  const defaults = {};
  
  // 将路由参数映射到查询表单
  if (route.query.status) {
    defaults.status = route.query.status;
  }
  if (route.query.category) {
    defaults.category = route.query.category;
  }
  if (route.query.keyword) {
    defaults.keyword = route.query.keyword;
  }
  
  setFieldsValue(defaults);
};

5.3 多选项卡默认值切换

const tabDefaults = {
  all: { status: undefined }, // 全部
  active: { status: '1', isDeleted: '0' }, // 活跃
  inactive: { status: '0' }, // 非活跃
  deleted: { isDeleted: '1' } // 已删除
};

const handleTabChange = (tabKey) => {
  const { setFieldsValue } = getForm();
  setFieldsValue(tabDefaults[tabKey]);
};

六、注意事项和最佳实践

6.1 时序问题处理

// 确保表格初始化完成后再设置默认值
const ensureTableReady = async () => {
  await nextTick(); // 等待下一个DOM更新周期
  await new Promise(resolve => setTimeout(resolve, 100)); // 额外等待时间
  setDynamicDefaults();
};

onMounted(() => {
  ensureTableReady();
});

6.2 错误处理机制

const safeSetDefaults = async () => {
  try {
    const { setFieldsValue } = getForm();
    if (!setFieldsValue) {
      throw new Error('表单实例未就绪');
    }
    
    await setFieldsValue(dynamicValues);
  } catch (error) {
    console.warn('设置默认值失败，尝试重新设置:', error);
    setTimeout(safeSetDefaults, 300);
  }
};

6.3 性能优化建议

// 避免频繁设置默认值
let hasSetDefaults = false;

const setDefaultsOnce = () => {
  if (!hasSetDefaults) {
    setDynamicDefaults();
    hasSetDefaults = true;
  }
};

// 使用防抖处理
import { debounce } from 'lodash-es';
const debouncedSetDefaults = debounce(setDynamicDefaults, 500);

七、完整示例代码

<template>
  <div class="p-4">
    <BasicTable @register="registerTable">
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts" setup>
import { BasicTable, FormSchema, useListPage } from '/@/components/Table';
import { defHttp } from '/@/utils/http/axios';
import { onMounted, nextTick } from 'vue';
import dayjs from 'dayjs';

// 表格列定义
const columns = [/* 列配置 */];

// 查询表单配置
const searchFormSchema: FormSchema[] = [
  {
    label: '姓名',
    field: 'name',
    component: 'JInput',
  },
  {
    label: '状态',
    field: 'status',
    component: 'Select',
    componentProps: {
      options: [
        { label: '启用', value: '1' },
        { label: '禁用', value: '0' }
      ]
    }
  },
  {
    label: '创建时间',
    field: 'createTime',
    component: 'DatePicker',
    componentProps: {
      valueFormat: 'YYYY-MM-DD'
    }
  }
];

// API接口
const demoListApi = (params) => {
  return defHttp.get({ url: '/api/data/list', params });
};

// 表格配置
const { tableContext } = useListPage({
  tableProps: {
    title: '数据列表',
    api: demoListApi,
    columns,
    formConfig: { schemas: searchFormSchema },
    useSearchForm: true,
  },
});

const [registerTable, { getForm }] = tableContext;

// 动态设置默认值
const setDynamicDefaults = async () => {
  try {
    const { setFieldsValue } = getForm();
    await setFieldsValue({
      status: '1', // 默认启用状态
      createTime: dayjs().format('YYYY-MM-DD') // 默认当天
    });
  } catch (error) {
    console.error('设置默认值失败:', error);
  }
};

// 组件挂载时设置默认值
onMounted(() => {
  nextTick(() => {
    setTimeout(setDynamicDefaults, 100);
  });
});

// 操作栏配置
const getTableAction = (record) => [/* 操作项 */];
</script>

总结

通过本文的详细讲解，我们掌握了在JeecgBoot项目中动态设置BasicTable组件查询条件默认值的多种方法。从基础的静态设置到高级的动态配置，从简单的字段赋值到复杂的业务逻辑处理，这些技巧能够显著提升用户体验和开发效率。

关键要点总结：

基础方法：直接在FormSchema中设置defaultValue
动态设置：使用getForm().setFieldsValue()方法
高级技巧：条件性设置、异步获取、路由参数映射等
最佳实践：注意时序问题、错误处理和性能优化

掌握这些技术后，开发者能够根据具体业务需求灵活设置查询条件默认值，打造更加智能和用户友好的数据查询界面。

CSDN-OPC开发者社区

这里是“一人公司”的成长家园。我们提供从产品曝光、技术变现到法律财税的全栈内容，并连接云服务、办公空间等稀缺资源，助你专注创造，无忧运营。

更多推荐

【AI工具】OfficeCLI 火了：让 AI 智能体接管你的 Word、Excel和PPT

OfficeCLI是全球首个专为AI智能体设计的开源Office套件，解决了AI无法"看见"文档的问题。它提供单二进制文件，无需安装Microsoft Office即可读写Word、Excel、PPT文档，并内置HTML渲染引擎实现实时预览。核心功能包括：一键创建/编辑文档、实时可视化反馈、AI友好接口（支持Claude Code等主流AI工具）、自然语言操作界面。安装简单，支持多平台，通过命令行

CSDN-OPC开发者社区

深演智能黄晓南出席 The MarTech Summit Hong Kong：布局全球化，把中国的企业AI实践带向世界

对这些企业来说，割裂的系统意味着割裂的客户理解——它们真正需要的，是一套既在中国 “work”、又在亚太“work”的 AI 能力和解决方案。作为港股企业决策 AI 智能体第一股，深演智能正在把 “AI for Growth” 从中国实践变成全球命题：以企业级 AI Agent 服务各行各业，让在中国被验证过的智能能力，成为全球企业增长的新基础设施。——AI 的价值不只是节省成本、提升效率，而是帮