WebBuilder Grid 搭配联动 Slot 组件（Wb.Slot + SlotView）应用场景

说明：联动 Slot 由外层 Slot 容器 + 多个 SlotView 列表视图组成，依靠 selectionchange 事件实现逐级异步加载，常与 Grid 表格组合使用：左侧多级联动筛选，右侧 Grid 实时刷新台账数据；也可独立用作表单多级层级选择。

一、【主流场景】Grid 台账页面侧边多级筛选（最常用）

交互模式：左侧联动 Slot（多级分类 / 层级），选中层级后，自动携带层级 ID 作为查询参数，刷新右侧 Grid 表格明细。

1. 行政区划筛选台账 Slot：大洲→国家→城市三级联动；Grid：人员、客户、网点、订单列表。 业务：客户管理、网点台账、销售订单按地区筛选。
2. 组织架构多级筛选 Slot：公司→部门→班组；Grid：员工台账、考勤记录、绩效清单。
3. 物资 / 商品分类筛选 Slot：大类→中类→小类；Grid：库存台账、采购明细、销售商品清单。
4. 设备层级筛选（物联网 / 运维） Slot：站点→区域→设备分组；Grid：设备清单、巡检记录、故障工单。

联动核心逻辑

// SlotView选中变更，刷新Grid
app.gridStaff.load({
    params:{
        area_id: this.selection.data.sid
    }
});

二、表单弹窗场景：多级层级数据选择（新增 / 编辑弹窗内部）

弹窗内嵌入联动 Slot，选择层级信息，回填表单字段，同时可作为 Grid 行编辑弹窗内的选择控件。

1. 档案录入：选择归属区域、归属部门；
2. 资产新增：选择资产分类、存放区域；
3. 项目管理：选择项目大类→子项目；

对比下拉框级联优势：多栏并列视图，层级一目了然，适合层级选项数量庞大、需要滚动浏览的场景。

三、报表统计页面：维度多级钻取筛选

报表页面上方 / 侧边放置联动 Slot，选择层级维度，刷新 Grid 统计报表、汇总台账。

• 财务系统：集团→分公司→部门，筛选费用明细 Grid；
• 生产系统：厂区→产线→班组，筛选生产工单 Grid；
• 政务平台：市局→区县→街道，筛选事项受理台账。

四、权限与数据分配场景：层级资源多选联动

静态模式 Slot（data 静态数组）+ 联动模式结合，用于资源勾选分配：

1. 角色权限配置：左侧组织架构联动 Slot，选中部门，右侧 Grid 加载对应人员，批量勾选分配权限；
2. 数据权限管控：选择区域 / 部门，Grid 筛选人员，设置数据访问范围。

五、BOM、供应链多级物料场景

1. 物料分类联动 Slot：一级物料分类→二级物料分类，Grid 展示物料清单；
2. 生产工序层级：生产线→工序组→工序，Grid 展示工序作业记录。

六、档案、知识库多级目录筛选

Slot：一级目录→二级目录→三级目录；Grid：文档档案清单。

适用：公文管理、知识库、图纸档案管理系统。

七、与 Grid 组合的两种经典布局模式

模式 1：左右分栏布局（页面级）

container（layout:grid）
├ Slot（联动多级选择）
└ Grid（业务台账，随Slot选中刷新）

模式 2：弹窗内布局（编辑弹窗）

Window弹窗
├ form表单
│  └ Slot（联动选择层级）
└ Grid（子明细表格）

八、选型对比：什么时候优先使用联动 Slot，而不是多级下拉 Cascader

✅ 适合联动 Slot：

1. 每一级选项数据量大，需要滚动列表浏览；
2. 希望多栏同时展示，直观看到每一级全部选项；
3. 需要支持多选、获取多条选中值；
4. 页面侧边筛选面板，占用区域较大。

❌ 不适合（优先多级下拉 Select）：

1. 表单空间狭小，需要紧凑单行级联选择；
2. 层级≥4 层，界面宽度不足，多栏挤压。

九、典型业务代码片段（Slot 联动刷新 Grid）

// SlotView selectionchange 事件脚本
if(!this.selection) return;
let parentId = this.selection.data.sid;
// 刷新右侧Grid，携带层级筛选条件
app.businessGrid.load({
    params:{
        parent_area_id: parentId
    }
});

十、落地注意事项

1. 多级联动必须增加 this.selection?.data 可选链，防止未选中时报错；
2. Grid 刷新使用 .load() 方法，不要直接修改 grid 本地 data；
3. 页面同时存在多个 Grid 时，Slot 事件精准绑定目标表格 cid，避免误刷新；
4. 大量数据场景，后端接口做好分页，防止 SlotView 一次性加载过多卡顿；
5. 若需要同时支持筛选 + 清空条件，增加清空按钮，调用 app.grid.clearFilter() 清空查询参数