V1.0.0
WinDesign A2UI Vue

WList 列表组件 ​

列表组件，基于 WinDesignNext WList 封装。采用数据驱动模式，通过 dataSource 指定数据路径，child 引用模板组件，列表项由数据自动循环生成。

数据驱动模式 ​

WList 不再需要单独定义 WListItem 组件，而是通过 dataSource + child 实现数据驱动：

模板组件内的子组件可通过 @row.xxx 访问当前行数据，通过 @.$index 访问当前索引。

基础用法 ​

Props API ​

属性名类型默认值说明
idstring-组件唯一标识（必填）
componentstringWList组件类型（必填）
dataSourcestring-数据源路径，指向 dataModel 中的数组，如 /items
headerstring''列表头部显示的文本内容
footerstring''列表底部显示的文本内容
sizestring''列表尺寸（small/default/mini/large）
splitbooleanfalse是否显示列表项之间的分割线
borderbooleanfalse是否显示列表边框
childstring-模板组件 ID，模板内通过 @row.xxx 访问当前行数据

path 支持说明 ​

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

属性支持 path说明
dataSource✅字符串路径，指向 dataModel 中的列表数组
模板内子组件✅使用 @row.xxx / @.$index 访问当前行
header / footer / size 等❌静态配置

绑定示例：

json
{
  "component": "WList",
  "dataSource": "/items",
  "child": "item-template"
},
{
  "id": "item-template",
  "component": "Text",
  "text": { "path": "@row.name" },
  "variant": "body"
}

模板数据绑定 ​

模板组件（child 指向的组件）及其子组件可以通过以下方式访问当前列表项数据：

路径格式说明示例
@row.xxx访问当前行数据的字段@row.name → "张三"
@row.xxx.yyy访问嵌套字段@row.address.city
@.$index访问当前行的索引@.$index → 0

使用示例 ​

简单文本列表 ​

json
[
  {
    "id": "item-list",
    "component": "WList",
    "split": true,
    "dataSource": "/items",
    "child": "item-template"
  },
  {
    "id": "item-template",
    "component": "Text",
    "text": { "path": "@row.name" },
    "variant": "body"
  }
]

对应数据：

json
{
  "updateDataModel": {
    "surfaceId": "main",
    "path": "/items",
    "value": [{ "name": "项目一" }, { "name": "项目二" }, { "name": "项目三" }]
  }
}

复杂模板（Row 布局 + 多字段） ​

json
[
  {
    "id": "item-list",
    "component": "WList",
    "border": true,
    "split": true,
    "dataSource": "/items",
    "child": "item-template"
  },
  {
    "id": "item-template",
    "component": "WRow",
    "children": ["item-name", "item-desc"],
    "justify": "spaceBetween",
    "align": "center"
  },
  {
    "id": "item-name",
    "component": "Text",
    "text": { "path": "@row.name" },
    "variant": "body",
    "weight": 2
  },
  {
    "id": "item-desc",
    "component": "Text",
    "text": { "path": "@row.description" },
    "variant": "caption",
    "weight": 3
  }
]

带头部和尾部 ​

json
{
  "id": "list_001",
  "component": "WList",
  "header": "诊断记录",
  "footer": "共 3 条记录",
  "border": true,
  "split": true,
  "dataSource": "/diagnosis",
  "child": "diagnosis-template"
}

不同尺寸 ​

json
{
  "id": "list_small",
  "component": "WList",
  "size": "small",
  "dataSource": "/items",
  "child": "item-template"
}

嵌套列表（dataSource 使用 @row.xxx） ​

当外层 WList 的某条数据包含数组字段时，内层 WList 可通过 dataSource: "@row.xxx" 从当前行数据中取嵌套数组。

数据结构：

json
{
  "departments": [
    {
      "deptName": "肿瘤科",
      "doctors": [
        { "name": "李医生", "title": "主任医师" },
        { "name": "赵医生", "title": "副主任医师" }
      ]
    },
    {
      "deptName": "胸外科",
      "doctors": [{ "name": "王剑锋", "title": "主任医师" }]
    }
  ]
}

内层 WList 的 dataSource 使用 "@row.doctors" 从外层当前行的 doctors 字段取数据，内层模板中继续用 @row.name、@row.title 访问内层行的字段。

Design by UED