资源容器组件问题排查指南

1 基础配置

1.1 绑定层级说明

绑定层级	说明
表单	容器内的表单字段共用主表单的数据空间
字段	容器内的表单字段是主表单指定字段的子属性，该字段通常为对象类型，适用于1:1关系模型

2 数据不显示或加载失败

2.1 高开容器与资源容器并存时不显示

现象：页面中同时存在高开容器和资源容器时，资源容器无法显示

解决方案：

1. 声明变量 loaded，默认值 false
2. 高开容器增加自定义事件 loaded，执行 this.v_loaded = true
3. 资源容器扩展属性配置：
   • 名称：v-if
   • 值：常量 v_loaded

2.2 标签页内资源容器不显示

解决方案：开启标签页的“懒加载”功能

2.3 视图排序配置不生效

现象：视图设置排序后，在资源容器中预览未生效

解决方案：视图配置变更后，需手动更新引用该视图的资源容器或子表格

2.4 移动端搜索框不显示

现象：移动端视图中查询条件框未显示，资源容器绑定视图，视图中有快速筛选搜索框，移动端不显示

解决方案：资源容器内的视图暂不支持移动端过滤

2.5 分组控制标题不显示

现象：分组控制内嵌资源容器，分组控制标题不显示

解决方案：改用标签页组件嵌入资源容器

3 数据串扰与冲突

现象	原因	解决方案
修改子表单内容影响父表单	绑定层级选为“表单”	绑定层级改为“字段”
执行资源容器内视图查询清空父表单	绑定层级为“表单”且调用doQuery()	绑定层级改为“字段”
多个标签页内数据互相干扰	多个资源容器引用同一实体表单且绑定为“表单”	绑定层级改为“字段”，各标签页使用不同字段标识

4 交互与事件失效

现象	解决方案
hideElements隐藏不生效	更换最新前端补丁
折叠页隐藏后，内部资源容器必填校验仍生效	将资源容器放入分组控制，通过控制分组显隐规避
根据表单状态动态设置必填校验的API不生效	在资源容器对应的表单中添加必填事件

4.1 跨页面通信

场景：页面A通过资源容器嵌入页面B表单，点击B页面保存按钮后，将表单数据传回A页面并触发事件

解决方案：在A表单加载前事件中监听消息总线

this.$bus.$on("监听的消息名", (接收到的参数) => {
  // 进行业务处理
})

4.2 动态过滤条件

场景：A页面资源容器引用视图 → 点击行内查看打开B表单 → B表单内资源容器引用视图 → 点击行内查看打开A表单，需根据不同的引用来源筛选不同的数据

解决方案：

1. 资源容器过滤条件直接指定当前表单字段，如 this.formData.trainid
2. 在表单高级中定义参数接收外部数据
3. 在表单加载前事件中判断参数值并赋值给表单字段

5 访问内部数据和方法

5.1 访问表单

// 获取表单数据
this.formData.field_XXXXXX

// 获取表单API对象
this.Api.getFrameAsync('field_XXXXXX').then(el => {
  console.log(el.Api)
})

5.2 访问视图

// 获取视图表格数据
this.formData.field_XXXXXX

// 主动触发视图查询
this.Api.getFrameAsync('field_XXXXXX').then(el => {
  el.Api.doQuery()
})

6 动态关联页面

场景：资源容器需要动态切换引用的页面资源

解决方案：在组件扩展属性中动态赋值 viewCode 和 viewId

7 性能优化

场景	问题	优化方案
1:N关系数据量大	渲染卡顿	1. 开启视图虚拟滚动 2. 避免直接绑定子实体字段，改用传关联ID分页查询
多个标签页切换	每次切换重新加载，响应慢	开启标签页懒加载