WTable 表格组件

A2UI Protocol JSON Schema

表格组件，基于 WinDesignNext WTable 封装，用于渲染表格数据。

基础用法

单元格渲染方式

WTableColumn 支持 两种渲染方式，根据需求选择：

方式一：prop 自动渲染（推荐简单场景）

{
  "id": "col_age",
  "component": "WTableColumn",
  "label": "年龄",
  "prop": "age"
}

自动渲染 scope.row.age 的值，无需额外配置。

方式二：children 自定义渲染（推荐复杂场景）

当需要：

• 添加文本样式（颜色、大小）
• 嵌套其他组件（按钮、标签）
• 自定义格式化逻辑

使用 children 配置：

{
  "id": "col_name",
  "component": "WTableColumn",
  "label": "姓名",
  "children": ["col_name_text"]
},
{
  "id": "col_name_text",
  "component": "WText",
  "type": "success",
  "text": {
    "path": "@row.name"
  }
}

关键注意点

使用 children 时，必须使用 scope 路径 (@row.xxx) 获取当前行数据！

// ❌ 错误 - 无法获取当前行数据
"text": { "path": "/userData/name" }

// ✅ 正确 - 使用 scope 路径
"text": { "path": "@row.name" }

---

Scope 路径详解

在表格自定义渲染中，每行都有独立的 scope 对象：

scope = {
  row: { name: '张三', age: 28 },  // 当前行数据
  column: { ... },                  // 列配置
  $index: 0                         // 行索引
}

路径格式

写法	含义	示例
@row.xxx	当前行的 xxx 字段（推荐）	@row.name
scope.row.xxx	同上（完整格式）	scope.row.name
@row.xxx.yy	嵌套字段	@row.user.name

属性参考

WTable

属性	类型	说明	默认值
id	string	组件唯一标识	-
component	string	固定值 WTable	-
dataSource	string	数据路径，如 /tableData	-
children	string[]	列组件 ID 数组	[]
border	boolean	是否显示边框	false
stripe	boolean	是否显示斑马纹	false
height	number	表格高度	-
showHeader	boolean	是否显示表头	true

path 支持说明

通用绑定格式见 path 数据绑定速查。

属性	支持 path	说明
WTable.dataSource	✅	字符串路径，指向 dataModel 中的表格行数组
单元格自定义渲染	✅	子组件使用 @row.xxx 访问当前行数据
WTableColumn.prop	⚠️	使用 @fieldName 表示字段名（非 dataModel 路径）
border / stripe / height 等	❌	静态配置

dataSource 绑定示例：

{
  "component": "WTable",
  "dataSource": "/tableData",
  "children": ["col_name"]
}

单元格 scope 路径示例：

{
  "component": "WText",
  "text": { "path": "@row.name" },
  "type": "primary"
}

WTableColumn

属性	类型	说明	默认值
id	string	组件唯一标识	-
component	string	固定值 WTableColumn	-
label	string	列标题	-
prop	string	对应数据字段名（自动渲染）	-
children	string[]	自定义单元格组件（scope渲染）	[]
width	number	列宽度	-
minWidth	number	最小列宽度	-
fixed	string	固定位置 left/right	-
type	string	selection/index	-