JeecgBoot项目中主表控制子表展示的实现方案

背景介绍

在JeecgBoot这一基于Spring Boot的低代码开发平台中，表单开发是核心功能之一。实际业务场景中经常遇到需要根据主表字段值动态控制子表展示的需求，例如根据"国内/国外"选择来控制不同子表（如Google子表和AppStore子表）的显示与隐藏。

技术实现原理

JeecgBoot通过增强JS功能实现了主表控制子表展示的交互效果。其核心原理是：

1. 事件监听机制：监听主表字段值的变化事件
2. 条件判断逻辑：根据主表字段值判断需要显示的子表
3. 动态DOM操作：通过JS控制子表区域的显示与隐藏

具体实现步骤

1. 表单配置

首先需要在表单设计器中配置主表和子表的关系，确保：

• 主表包含控制字段（如"国内/国外"单选按钮）
• 子表区域有明确的标识（如tab页签或div区域）

2. 编写增强JS代码

在表单的增强JS部分添加以下逻辑：

// 监听主表字段变化
watch: {
  'model.regionType'(val) {
    // 根据值控制子表显示
    if(val === 'domestic') {
      this.showTab('googleTab');
      this.hideTab('appStoreTab');
    } else {
      this.hideTab('googleTab');
      this.showTab('appStoreTab');
    }
  }
},
methods: {
  // 显示指定tab
  showTab(tabName) {
    // 实现显示逻辑
  },
  // 隐藏指定tab
  hideTab(tabName) {
    // 实现隐藏逻辑
  }
}

3. 初始化处理

在页面加载时需要根据初始值设置子表显示状态：

created() {
  // 根据初始值设置子表状态
  this.handleRegionChange(this.model.regionType);
}

高级应用场景

1. 多条件控制：可以扩展为基于多个字段组合条件控制子表显示
2. 动画效果：为子表切换添加过渡动画提升用户体验
3. 数据联动：在显示/隐藏子表的同时，可以联动清空或加载子表数据

注意事项

1. 确保子表区域的ID或名称与JS代码中的标识一致
2. 考虑子表数据保存逻辑，隐藏的子表数据是否参与提交
3. 移动端适配时需要注意显示区域的响应式布局

通过JeecgBoot提供的增强JS功能，开发者可以灵活实现各种主表控制子表的业务场景，大大提升了表单交互的灵活性。