表格组件

表格常用于展示和操作数据。

绝大多数的数据源均可以展示在表格中。比如,你可以用表格将 MySQL 中的数据读入并展示出来,或连接 API 将请求结果展示出来。

读入数据

要用表格展示数据,首先你需要告诉表格数据的来源。最简单的数据来源就是一个已经存在的 JSON,比如你可以将以下 JSON 复制到表格的表格数据属性中。我们在本文中先用这个简单的 JSON 作为例子,在本文尾部再连接查询来用表格展示数据库或 API 中的数据

[
  {
    "name": "小花",
    "photo": "http://placekitten.com/200/300"
  },
   {
    "name": "小黄",
    "photo": "http://placekitten.com/300/300"
  },
    {
    "name": "小鸭",
    "photo": "http://placekitten.com/400/300"
  },
    {
    "name": "小红",
    "photo": "http://placekitten.com/280/300"
  },
    {
    "name": "小绿",
    "photo": "http://placekitten.com/350/300"
  }
]

复制后的结果如下图,可以看到,只要你在 表格数据 这个属性中填入了一个格式正确的 JSON 数组,那么卡拉云就会自动将表格的 key 读出作为列名,同时将内容分行展示出来。

表格数据

更换列别名

注意在上面表格中,表格直接读取了 JSON 里对应行的键值作为列名。如果你希望将列名更换为更加用户友好的列名的话,那么可以点击列设置,为你希望设置的列添加一个别名,如下图所示

更改表格列名

变更列展示类型

每个表格列均可以调整展示类型,比如一列的数据是图片链接,那么只要设置将这一列的图片展示出来即可。 更改表格列展示

👍
多种展示类型支持

目前表格支持将列渲染为纯文本(默认),图片和 HTML。也就是说即使你有自己写的 HTML 组件,也可以放到表格中(比如评分、Icon 等任何 HTML 组件)

列默认排序和表格排序

表格排序是指,当你的用户点击表格的标题时,表格会将表格内所有内容按点击的列进行排序。

如果你希望用户在没有点击任何列时,默认也可以排序,那么你可以选中表格后,设置其默认排序属性。设置了默认排序后,如果用户没有主动点击排序时,会按你设置的默认排序列进行排序,而如果用户点了按某列进行排序,则会优先用户的选择。注意:用户在使用时的操作不会影响你的设置,即用户 A 设置按某列进行排序时,同时在使用此应用的用户 B 不会受任何影响。

📘
对多列进行排序

按住上档键(Shift)点击标题时,用户可以进行多列排序,优先级取决于点击的先后次序

调整列顺序

即使不调整表格数据,你也可以直接通过表格设置来调整表格列的顺序。

更改表格顺序

👍
智能列宽

表格的宽度会智能地变化,你也可以手动通过调整表格头的宽度来调整列宽度

翻页和每页展示行数

卡拉云的表格支持显示几乎任意大小的数据,在我们的测试中,加载 10000 条到表格中时仍然表现流畅。

在数据量较大时,我们建议用分页来提升用户体验。在表格设置中,你可以设置每页默认展示行数,比如 10,这样一页会展示 10 行数据。

设置了默认大小的表格,会在用户未指定每页大小时,用这个默认大小。如果用户在使用时需要展示更多数据,可以点击表格页角中的下拉菜单,选择展示更多的行数。用户设置的行数是个临时值,用户 A 的设置不会互相影响其它用户 B。

引用选择的行

很多时候你的用户需要对于表格中的某一行做一些操作,比如说,从 SQL 中读取表格数据后,你可能希望提供一个删除按钮,供用户将选中的一行删除。

表格中暴露出来的 selectedRow 属性就可以被引用来完成这个功能,当用户选中某一行时,表格里的 selectedRow 动态属性会更新为用户选中的那一行。你可以在查询中或者其它任何地方,来引用用户选中的这一行。比如说,在下图中我们在一个文本框里展示出来用户选中了哪一行

选择行

同样的原理,你可以在你的 SQL 查询或 API 查询中使用 selectedRow,这样就可以任意实现添加、删除表格行的功能。对于完整的例子请看:

© 2021 卡拉云 Built with ❤️ in Beijing

京ICP备15049164号-9