表格

分类

配置

示例

说明

内容

数据源

表格数据源，用于配置表格当前显示的结构化数据源。如图中示例，该配置项需接受标准 JavaScript 对象数组。

主键

主键，在结构化数据中用于唯一标识每行数据的字段名称。在表格组件中，它将作为每条记录的唯一标识符，确保数据的准确引用和操作。

空数据文案

空数据文案，数据源为空时表格区显示的文案。

数据列配置

数据列配置，用于配置表格各列的显示及行为，主要配置内容如下：

• 标题：数据列表头的内容。

• 提示内容：数据列表头的提示内容，填入文字后表头标题右侧将出现可 hover 显示提示内容的“问号”图标。

• 宽度自适应：控制该数据列是否自适应宽度。

• 宽度：当“宽度自适应”关闭时，控制该数据列的像素宽度。

• 超出自动省略：控制数据列单元格的内容是否在超出宽度时自动省略。

• 隐藏：控制该数据列是否隐藏。

• 固定：控制该数据列是否在表格区域“左侧”或“右侧”固定。

• 内容对齐方式：控制该数据列整体的内容对齐方式，可选“左侧”、“中间”或“右侧”对齐方式。

• 列类型：定义该数据列单元格内容展现形式，各可选类型数据约束以及细节配置如下：

  • 文本：文本列的属性约束为字符类型，单元格数据将以文本形式展示。文本列具体配置如下：

    • 文本颜色：单元格内容的文本颜色。

  • Markdown：Markdown 列的属性约束为字符类型，单元格数据将支持 Markdown 文本的渲染和展示。

  • 数字：数字列的属性约束为数字类型，单元格将以数字形式展示数据。

  • 日期：日期列的属性约束为数字或字符类型。其中，数字类型支持标准 Unix 时间戳，字符类型支持 format 格式的日期描述字符串或 ISO 8601 时间表示字符串。单元格将以 format 格式的日期时间进行展示。日期列具体配置如下：

    • 格式化：单元格内时间内容的格式化描述，如 YYYY-MM-DD。

  • 评分：评分列的属性约束为数字类型，单元格将以评分组件的形式展示数据。

  • 链接：链接列的属性约束为字符类型，单元格数据将以文本链接形式展示。链接列具体配置如下：

    • 事件：定义链接点击时触发的事件处理器。

  • 图片：图片列的属性约束为字符类型。其中，字符类型支持图片 URL 字符串。单元格将以该 URL 进行图片渲染。

  • 进度条：进度条列的属性约束为数字类型，单元格将以进度条组件的形式展示数据。进度条列具体配置如下：

    • 内容文字类型：进度条内容文字类型，可参考进度条组件文档。

    • 自定义内容：进度条类型为自定义时显示的自定义内容，可参考进度条组件文档。

    • 进度条默认颜色：进度条的默认颜色，可参考进度条组件文档。

  • 状态：状态列的属性约束为字符类型，单元格数据将以字符文案及状态点组件的形式组合展示。状态列具体配置如下：

    • 状态：状态列小圆点显示样式。当值为表达式时，该内容支持值为 success、processing、default、error、warning 的枚举字符串。

  • 头像：头像列的属性约束为字符类型。其中，字符类型支持文本描述内容或图片 URL 字符串。单元格将根据配置类型以文本内容或 URL 进行渲染。头像列具体配置如下：

    • 类型：配置头像组件的展示类型，具体配置可参考头像组件文档。

    • 文本颜色：当头像类型为文本时生效，配置文本内容的颜色。

    • 背景颜色：当头像类型为文本时生效，配置文本头像中的背景颜色。

  • 标签：标签列的属性约束为字符类型。单元格将以标签组件进行渲染。标签列具体配置如下：

    • 颜色：配置标签组件的主题颜色，具体可参考标签组件文档

  • 标签组：标签组列的属性约束为字符串数组类型。单元格将以多个标签组件进行渲染。标签列具体配置如下：

    • 颜色：配置标签组中每一个标签组件的主题颜色，具体可参考标签组件文档

  • 按钮：按钮列的属性约束为字符类型。单元格将以该字符文本作为按钮组件的内容进行渲染。按钮列具体配置如下：

    • 按钮类型：可参考按钮组件文档。

    • 按钮宽度：按钮的像素宽度。

    • 按钮行高：按钮的行高

    • 样式属性：具体配置项可参考按钮组件文档。

  • 开关：开关列的属性约束为布尔类型，单元格将以开关组件的形式展示数据。

• 字段映射：列数据在数据项中对应的路径。数据列将使用该路径获取数据用于单元格渲染。

• 动态映射：是否开启动态映射，开启动态映射后单元格将不再使用字段映射对应数据进行渲染。

• 映射规则：开启动态映射时生效，可编写自定义插值表达式来决定单元格渲染内容。此处表达式语句可使用迭代器变量 currentItem获取当前行数据，例如 {{ currentItem.name + '同学' }} 可设置单元格显示行数据中的名称并附加“同学”后缀。

  重要

  currentItem 依赖主键的正确设置。

• 可编辑：是否开始单元格可编辑能力，该能力当前仅对文本、日期、数字列生效。

• 开启筛选：是否开启数据列筛选能力。

• 筛选设置：筛选设置具体配置如下

  • 筛选项：可设置预置筛选项的标题和用于筛选的数值。

• 开启排序：是否开启数据列排序能力。

• 排序设置：排序设置具体配置如下：

  • 多列排序：配置多列排序优先级，具体可参考 AntD 表格多列排序。

操作列配置

操作列配置，用于配置表格区域右侧操作列的内容和交互行为，主要配置内容如下：

• 标题：操作列表头标题内容

• 宽度自适应：控制该操作列是否自适应宽度。

• 样式：操作列中操作项的展示样式，可选“链接”或“按钮”。

• 操作列：定义操作项的具体内容和交互形式，当无操作项配置时表格将不会展示操作列，主要配置如下：

  • 标题：操作项的显示内容。

  • 隐藏：是否隐藏该操作项。

  • 悬浮提示：hover 该操作项时显示的内容。

  • 禁用：是否禁用该操作项

  • 位置：操作项出现位置，可选“外侧”、“收起”或“同时出现”。当选择“收起”或“同时出现”时，该操作项将被收起在操作行右侧会出现“更多”下拉链接。

  • 事件：定义该操作项点击触发的事件处理器。

显示工具栏

是否显示表格工具栏。

工具栏配置

工具栏配置，用于配置表格组件工具栏的标题及设置项的样式及交互形式，主要配置内容如下：

• 标题：工具栏标题。

• 标题字号：工具栏标题字号。

• 标题字重：工具栏标题字重。

• 标题颜色：工具栏标题颜色。

• 设置区：工具栏右侧设置区域各设置项的样式及交互形式，具体配置如下：

  • 提示信息：该配置项 hover 时显示的文本内容

  • 类型：该配置项的交互类型。可选“列设置”或“自定义”，当选中列设置时，该配置项被点击后将弹出列筛选气泡卡片。

  • 图标：该配置项图标样式。

  • 事件：该配置线被点击时触发的事件处理器。

交互

隐藏

隐藏，详情参见通用属性。

隐藏时保留布局

隐藏时保留布局，详情参见通用属性。

加载

加载，表格组件是否显示加载状态。

行选模式

行选模式，用于定义表格行可选中的交互模式。

分页设置

分页设置，用于定义分页区的展现和交互形式，主要配置如下：

• 开启分页：是否显示分页器。

• 尺寸：分页器的尺寸设置。

• 分页大小：每页数据条数。

• 位置：分页器相对组件的位置。

• 一页隐藏：当只有一页数据时是否隐藏分页器。

• 快速跳转：是否显示快速跳转交互区域。

• 显示切换器：是否显示分页大小切换器。

• 服务端分页：是否开启受控数据分页。

• 受控页码：开启服务端分页时生效，用于接收受控当前页码。

• 受控总数：开启服务端分页时生效，用于接收受控当前数据总数。

样式

外边距

外边距，详情参见通用属性。

表格尺寸

表格尺寸大小。

显示列框线

是否显示列框线。

表格背景色

用于定义表格背景色。

表头背景颜色

用于定义表头背景颜色。

表头文字颜色

用于定义表头文字颜色。

表头分割线颜色

用于定义表头分割线的颜色。

表格边框颜色

用于定义表格边框颜色。

名称

类型

示例

说明

dataSource

Array<any>

table1.dataSource

表格组件数据源

column

Array<{

title: string;

hidden: boolean;

dataIndex: string;

type: string;

}>

table1.column

表格组件列配置数据

rowKey

string

table1.rowKey

表格组件的主键

changedArray

Array<any>

table1.changedArray

表格编辑态保存后的变化数据内容

selectedRows

Array<any>

table1.selectedRows

表格当前选中的数据内容

pagination

{

current: number;

pageSize: number;

}

table1.pagination

表格的分页数据内容，可获取当前页码和页数大小

currentSort

Array<{

key: string;

order?: 'ascend' | 'descend'

}>

table1.currentSort

表格当前排序状态的数据

currentFilter

Array<{

key: string;

value?: any[];

}>

table1.currentFilter

表格当前筛选状态的数据

rowSelectionMode

multiple | single | none

table1.rowSelectionMode

表格当前的行选模式

loading

boolean

table1.loading

表格组件当前加载状态

setDataSource

func

table1.setDataSource(xxxx)

设置表格的数据源

clearDataSource

func

table1.clearDataSource()

清空表格的数据源

setLoading

func

table1.setLoading(true)

设置表格的加载状态

clearLoading

func

table1.clearLoading()

清空表格的加载状态

setColumns

func

table1.setColumns(xxx)

设置表格的列配置，可用于动态显示操作列或更改列配置

setSelections

func

table1.setSelections(['id', 'id2'])

设置表格当前选中的数据行

clearSelections

func

table1.clearSelections()

清空表格当前选中的数据行

配置

说明

表格点击时触发的事件

表格行选择时触发的事件

表格可编辑数据保存时触发的事件

表格触发分页、筛选、搜索变化时触发的事件