WebBuilder Grid + 联动 Slot 组件实战应用案例
原创
WebBuilder Grid + 联动 Slot 组件实战应用案例
原创
技术挖掘官
发布于 2026-07-23 17:11:28
发布于 2026-07-23 17:11:28
通用布局结构统一规范
module
└── viewport(layout:grid1)
└── container(layout:"grid") // 左右分栏
├ Slot（多级联动选择区）
└ Grid（业务数据台账）案例 1：客户区域台账筛选（大洲→国家→城市三级联动）
业务场景
客户管理页面，左侧按行政区划层级筛选，选中区域后，右侧客户表格自动加载对应区域客户信息。
完整代码
({
cname: "module",
cid: "customer_slot_grid_demo",
items: [{
cname: "viewport",
cid: "view1",
layout: "grid1",
items: [
{cname: "label", text:"客户区域台账查询", cls:"w-title3"},
{
cname: "container",
cid: "mainCt",
layout: "grid",
frame: true,
items: [
// 左侧联动Slot
{
cname: "slots",
cid: "areaSlot",
height: "25em",
defaults: "({ autoScroll: 'hide' })",
border: false,
items: [
{
cname: "list",
cls: "Wb.SlotView",
cid: "continentView",
url: "demo-source?xaction=listRootArea",
topTitle: "大洲",
textField: "area_name",
events: {
"selectionchange": `
app.countryView.clear();
app.cityView.clear();
if(this.selection){
app.countryView.load({ params: { parent_id: this.selection.data.sid } });
}else{
// 清空选择，刷新全部客户
app.customerGrid.load({params:{area_id:null}});
}
`
}
},
{
cname: "list",
cls: "Wb.SlotView",
cid: "countryView",
url: "demo-source?xaction=listArea",
topTitle: "国家",
textField: "area_name",
events: {
"selectionchange": `
app.cityView.clear();
if(this.selection){
app.cityView.load({ params: { parent_id: this.selection.data.sid } });
}else{
app.customerGrid.load({params:{area_id:null}});
}
`
}
},
{
cname: "list",
cls: "Wb.SlotView",
cid: "cityView",
url: "demo-source?xaction=listArea",
topTitle: "城市",
textField: "area_name",
events: {
"selectionchange": `
let areaId = this.selection?.data.sid || null;
app.customerGrid.load({ params: { area_id: areaId } });
`
}
}
]
},
// 右侧客户Grid表格
{
cname: "grid",
cid: "customerGrid",
height: "25em",
url: "demo-source?xaction=customerList",
pageSize: 10,
frame: true,
items: [{
cname: "array",
cid: "columns",
items: [
{cname:"column",rowNum:true},
{cname:"column",text:"客户名称",fieldName:"cust_name"},
{cname:"column",text:"联系人",fieldName:"contact"},
{cname:"column",text:"所属城市",fieldName:"city_name"}
]
}]
}
]
}
]
}]
})业务亮点
- 上级清空选择时，下级列表同步清空；
- 无选中条件加载全部数据；
- 层级逐级筛选，适合客户、网点、分支机构管理系统。
案例 2：物资分类库存台账（一级分类→二级分类两级联动）
业务场景
仓储管理系统，左侧物资分类两级联动，筛选对应品类库存清单。
({
cname: "module",
cid: "stock_slot_grid_demo",
items: [{
cname: "viewport",
cid: "view1",
layout: "grid1",
items: [
{cname: "label", text:"物资库存台账", cls:"w-title3"},
{
cname: "container",
layout: "grid",
frame: true,
items: [
{
cname: "slots",
cid: "goodsSlot",
height: "25em",
border: false,
items: [
{
cname: "list",
cls: "Wb.SlotView",
cid: "type1View",
url: "demo-source?xaction=goodsTypeRoot",
topTitle: "一级分类",
textField: "type_name",
events: {
"selectionchange": `
app.type2View.clear();
if(this.selection){
app.type2View.load({params:{parent_id:this.selection.data.type_id}});
}else{
app.stockGrid.load({params:{type_id:null}});
}
`
}
},
{
cname: "list",
cls: "Wb.SlotView",
cid: "type2View",
url: "demo-source?xaction=goodsType",
topTitle: "二级分类",
textField: "type_name",
events: {
"selectionchange": `
let tid = this.selection?.data.type_id || null;
app.stockGrid.load({params:{type_id:tid}});
`
}
}
]
},
{
cname: "grid",
cid: "stockGrid",
height: "25em",
url: "demo-source?xaction=stockList",
pageSize: 10,
items: [{
cname: "array",
cid: "columns",
items: [
{cname:"column",rowNum:true},
{cname:"column",text:"物资名称",fieldName:"goods_name"},
{cname:"column",text:"库存数量",fieldName:"stock_num"},
{cname:"column",text:"存放仓库",fieldName:"warehouse"}
]
}]
}
]
}
]
}]
})适用：ERP、物资管理、固定资产台账。
案例 3：组织架构人员台账（公司→部门两级联动）
业务场景
人力资源系统，左侧组织架构联动，筛选对应部门员工清单。
({
cname: "module",
cid: "hr_slot_grid_demo",
items: [{
cname: "viewport",
cid: "view1",
layout: "grid1",
items: [
{cname: "label", text:"人员台账（按组织筛选）", cls:"w-title3"},
{
cname: "container",
layout: "grid",
frame: true,
items: [
{
cname: "slots",
cid: "orgSlot",
height: "25em",
border: false,
items: [
{
cname: "list",
cls: "Wb.SlotView",
cid: "companyView",
url: "demo-source?xaction=companyList",
topTitle: "公司",
textField: "company_name",
events: {
"selectionchange": `
app.deptView.clear();
if(this.selection){
app.deptView.load({params:{company_id:this.selection.data.company_id}});
}else{
app.empGrid.load({params:{dept_id:null}});
}
`
}
},
{
cname: "list",
cls: "Wb.SlotView",
cid: "deptView",
url: "demo-source?xaction=deptList",
topTitle: "部门",
textField: "dept_name",
events: {
"selectionchange": `
let did = this.selection?.data.dept_id || null;
app.empGrid.load({params:{dept_id:did}});
`
}
}
]
},
{
cname: "grid",
cid: "empGrid",
height: "25em",
url: "demo-source?xaction=staffAllDict",
pageSize:10,
items: [{
cname:"array",cid:"columns",
items:[
{cname:"column",rowNum:true},
{cname:"column",text:"姓名",fieldName:"full_name"},
{cname:"column",text:"岗位",fieldName:"post"},
{cname:"column",text:"薪资",fieldName:"salary"}
]
}]
}
]
}
]
}]
})案例 4：运维设备台账（站点→分组→设备三级联动）
业务场景
物联网 / 运维平台，筛选站点、设备分组，查看巡检、故障记录 Grid。
逻辑和案例 1 保持一致，替换接口字段：
- SlotView：站点 → 设备分组 → 设备
- Grid：巡检记录、故障工单
案例 5：弹窗内组合场景（编辑弹窗内部 Slot + 子表 Grid）
业务场景
新增项目弹窗：左侧联动 Slot 选择项目层级，右侧 Grid 维护项目子任务明细。
布局放在 Wb.Window 弹窗内部，多用于表单主子表场景。
通用开发标准要点（全部案例统一遵循）
- 清空联动逻辑
上级重新选择时，下级 SlotView 调用
.clear()清空旧数据，避免残留； - 空值防护
使用
this.selection?.data.xxx可选链，防止未选中时报脚本异常； - 表格刷新方式
统一使用
grid.load({params:{}})携带查询参数，不要操作本地 data； - 交互优化建议 页面增加【重置】按钮，脚本：
app.areaSlot.clearAll();
app.customerGrid.load({params:{area_id:null}});选型总结
✅ 适合选用「联动 Slot + Grid」
- 层级≥2 级、选项数量多，需要列表滚动浏览；
- 页面侧边筛选面板，左右分栏布局；
- 需要直观展示每一级全部选项，对比多级下拉 cascader 视觉更清晰。
❌ 不推荐
表单空间狭小、层级过多（≥4 级），界面宽度不足，优先使用级联下拉组件。
如果你需要，我可以把其中任意一个案例扩展成完整操作教学文章，或者补充重置按钮、默认加载、多选模式扩展版本。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
目录
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号