跳到主要内容

表格容器

用于分页展示列表数据，并支持对数据的动态过滤、排序。

一、属性​

1. 数据源​

image-20250618111906880

表格容器提供三种数据绑定方式，具体绑定方式详见 数据绑定。

2. 数据列​

表格容器绑定数据源后，能自动识别返回的数据并设置数据列，同时会自动生成操作列，操作列中包含“编辑”“详情”“删除”三个按钮。

image-20250618113001322

也可以手动设置数据列，点击 添加项 按钮可添加操作列，点击数据列左侧按钮可编辑该列的信息。

image-20250618135816772

3. 功能​

3.1 尺寸​

image-20250618140355762

设置表格展示数据的大小，支持小、中、大三种模式。

3.2 分页显示 / 每页记录数​

image-20250618140620557

分页显示默认开启，开启后表格右下角会出现分页页码和记录数。每页记录数用于设置每页显示的数据量。

3.3 选择模式​

image-20250618140821596

选择模式默认为“无”。可选择“单选”或“多选”：

  • 单选：常用于弹窗式选择数据时，返回单行数据。

    image-20250618141110677

  • 多选：常用于批量操作，如批量删除、批量新增（例如角色下批量绑定用户）。

    image-20250618141138580

4. 过滤表单​

4.1 表单类型（默认是查询模式）​

  • 查询模式：

    表格上方会显示一个查询表单，用户可设置接口的过滤条件。

    image-20250618143357423

    • 隐藏过滤表单：开启后隐藏查询表单。

    • 表单项宽度 / 偏移：设置表单项的大小与位置。

    • 标签对齐：设置标签在查询表单中的位置。

      image-20250618143819538

    • 操作按钮隐藏：开启后隐藏操作按钮。

    • 展开 / 折叠：设置显示的行数（默认为 1），当表单项列数超过行数限制时，将折叠表单。

      image-20250618144244677

  • 轻量模式：

    查询表单将被隐藏，但可在数据列上配置轻量查询条件。

    image-20250618145759019

5. 标题栏​

image-20250618150322281
image-20250618150244763

  • 隐藏标题栏 / 操作区：可分别隐藏标题栏和操作区。

  • 标题：可自定义输入标题文本，也可开启设计模式，拖入自定义组件。

    image-20250618150843565

二、样式​

无特殊样式配置，详见 通用样式。

三、常用场景​

通过表格容器分页展示某个城市的天气信息数据。

image-20240827112243885