WebBuilder 基础表格实战（远程接口 + 本地静态数据）

一、前言
绝大多数企业后台的核心场景都是数据列表展示。传统 Vue/React 需要手动写接口、处理分页、处理加载状态、异常处理、数据渲染。
而 WebBuilder Grid 组件零封装、零AJAX、零状态管理，仅通过配置即可实现：远程动态表格、本地静态表格、自动分页、自动渲染。
二、远程接口表格（标准后台列表）
完整可运行源码
{ cname: “grid”, cid: “commonRemoteGrid”, height: “15em”, // 绑定后端数据源 url: “demo-source?xaction=staffAllDict”, // 每页条数 pageSize: 10, // 分页栏配置 pagingBar: { cname: “pagingBar”, cid: “pagingBar”, isProperty: true, // 关闭手动输入页码（更适配政企系统） showPageEdit: false }, // 数据加载成功回调 events: { success(parent, items, response, xhr, e, options){ // items: 当前页数据列表 // response: 后端完整返回体 } } }
三、核心代码逐行解析
url：WebBuilder 专属数据源协议，无需手写 axios/fetch，框架自动完成请求、loading、异常捕获、数据回填。
pageSize：内置分页逻辑，自动切割数据、自动渲染分页条、无需手写分页算法。
pagingBar：属性级分页配置，支持隐藏页码输入、自定义分页样式、极简适配政企规范。
success 事件：全局统一成功钩子，可拿到原始返回数据，做二次数据加工。
四、本地静态数据表格（无需后端接口）
核心源码片段
{ cname: “grid”, cid: “miscGrid”, height: “20em”, // 本地静态数据，不请求后端 localData: [ { _icon: “user1”, code: “10001”, full_name: “Terri Duffy”, gender: “Female” }, { _icon: “user”, code: “10002”, full_name: “Roberto Tamburello”, gender: “Male” } ], pageSize: 10, // 展示行首图标 showIcon: true, // 默认按 code 字段排序 sorters: “code”, // 列可排序 columnsSortable: true, // 列宽度可拖拽调整 resizable: true }
五、能力总结
传统开发 200 行代码的列表页，WebBuilder 30 行配置搞定，自带：加载状态、空数据展示、分页、排序、列宽调整，彻底告别重复模板代码。