表格（Table）

表格（Table）

表格是查看数据及数据交互的常见方式。您可以对数据进行排序、筛选、分页和下载等。表格还支持行选择和自定义列。

​

在表格中加载数据

当你拖动一个Table组件到画布时，它会自动显示JSON格式的测试数据。你可以通过编辑数据源属性来改变表格中显示的数据，使用 {{actionName.data }} 来选择Action的数据。

​

列的设置

​

为数据列设置别名

当你设置表格的数据源时，列名将根据数据源自动设置。你可以通过点击INSPECT中的列，并设置列标题来重命名所有的列。

​

改变列数据类型

当你设置表格的数据源时，列数据被设置为文本类型。你可以通过点击INSPECT中的列，在列类型的下拉菜单中选择数据类型来手动设置列类型。

列的类型包括：

1. 文本
2. 日期，你可以在日期类型中设置日期的显示格式。
3. 数字，你可以在数字类型中设置小数点的位置。
4. 4.百分比，你可以在百分比类型中设置小数点后的位置。
5. 链接
6. 按钮，你可以在按钮类型中添加事件处理程序。

​

自定义列的映射值

你可以使用INSPECT中的+ New 按钮添加自定义列。自定义列经常用于显示根据表格中的其他值计算出来的数据。例如，有revenue和user_num列，想计算得出ARPU列，可以使用{{ currentRow.revenue/currentRow.user_num }}。

此外，在计算之后，你可以将列的类型设置为数字或百分比，并设置小数点后的位置以提高可读性。

​

访问表的数据

使用{ table1.selectedRow[i].columnName }}来访问其他组件中选定行的数据。如果你没有启用多行选择，i将永远是0。

​

更新表的数据

1. 使用输入组件或其他数据输入组件来显示{{ table1.selectedRow[i].columnName }}数据。
2. 在更新数据的Action中使用{{ input1.value }}，以获取表格中选定行的值和更新后的值。
3. 给更新按钮添加一个事件处理器，从而在点击按钮时运行更新数据的Action。
4. 通过改变输入组件中的输入值和点击更新按钮来更新所选行的数据。

​

在表中插入新的一行

1. 在插入数据的Action中使用{{ input1.value }}来获取待插入的数据。
2. 给插入按钮添加一个事件处理器，从而在点击时运行插入数据的Action。
3. 通过在输入组件中输入数据并点击插入按钮来插入新数据。