表格组件

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

绝大多数的数据源均可以展示在表格中。比如,你可以用表格将 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 里对应行的键值作为列名。如果你希望将列名更换为更加用户友好的列名的话,那么可以点击列设置,为你希望设置的列添加一个别名,如下图所示

更改表格列名

对每行或每列进行操作

有时我们希望对整列进行操作,举个例子,如果你的数据中某列是用户的生日年份,而运营需要开发一个需求是一目了然需要知道这些用户的年龄。

要实现这个需求,一个办法是在查询数据时进行处理。

比如说,如果你的数据来自于数据库,那么在 SQL 查询中,用生日列来计算对应用户的年龄。如果你的数据来自于 API,那么可以新增加一个 API 接口,将计算完年龄的用户返回。

但是这样的需求可能很细碎,不断调整 SQL 和 API 非常麻烦。我们其实也可以将对应的列操作放到卡拉云中进行计算。对于上面这个例子,假设我们的数据是

[
  {
    "year": 1989,
    "name": "Ed"
  },
  {
    "year": 1988,
    "name": "小张"
  },
  {
    "year": 1978,
    "name": "小红"
  },
  {
    "year": 1999,
    "name": "小白"
  },
  {
    "year": 1998,
    "name": "小沈"
  },
  {
    "year": 2001,
    "name": "小明"
  }
]

那么我们可以用 JavaScript 中自带的时间函数,获取当前年份,再减去每行中用户对应的出生年即可得到用户的年龄。换句话说,我们可以对数据中的整列、整行进行任意数据操作,而不用每次为了琐碎的小需求修改后端。

对每行每列进行操作

图中的代码为

{{
  getUsers.data.map(row => {
    return {
      "age": new Date().getFullYear() - row.year,
      "name": row.name
    }
  })
}}

这里的 map 函数即循环数据中的每一行,是 JavaScript 的数组自带的函数。对于每行我们返回 new Date().getFullYear() - row.year 即为用户年龄。

👍
支持任意复杂程度的逻辑
注意这里只是用一个简单例子说明卡拉云中的行列操作。本质上来讲,这只是普通的 JS 代码,因此对于数据数组 `getUsers.data` 而言,你可以用任意复杂的逻辑进行操作,只要返回的任然是一个表格接受的数组结构即可。

客户端翻页

如果你的查询数据量不大,可以进行客户端翻页,即一次将所有数据全部查询出来,再用表格进行翻页。比如,用以下查询来查找所有数据库中的用户

SELECT * FROM users;

当你将表格上的翻页方式设置为 客户端翻页 时,表格会自动允许你的用户对查询出的数据进行翻页,每页显示数可在每页展示行数中进行设置。

如果一个查询返回的结果数不多于 100 条时,客户端翻页的使用体验可以非常流畅。但如果数据较多而又希望使用客户端翻页,那么在查询时必须加上一些限制,比如说查询消费最高的 50 个用户

SELECT * FROM users ORDER BY spend DESC;

总之,如果你的查询每次返回的结果较少时(1000 条数据以下),可以使用客户端翻页。否则为了保证用户使用应用的体验,你需要用服务端翻页

服务端翻页

虽然卡拉云的表格支持显示较大量的数据,但一次性将过多数据放入前端中将会不可避免地造成卡顿。如果需要查询的数据量较大时,比如说查询总数据行数多于 1000 条,我们建议进行服务器翻页

服务端翻页的实现很简单,即每次查询时,我们仅加载在表格中一页会展示的数据量,而非一次读入后在前端进行翻页。

下面我们用一个实例来说明如何实现服务端翻页

假设你的数据行数为 10 万行,那么一次查询将 10 万行数据全部加载是不现实,同时也是不必要的,原因是你的用户同一时间最多与十几行数据进行交互。

因此与其一次加载 10 万行数据到前端造成卡顿,不如先只加载 20 行数据,当用户需要加载下一页时,再加载下个 20 行。

如果你的用户现在正在表格的第 3 页(下标从 0 开始),每页展示的数据行数是 20 行,那么你的数据库查询加载下一页的数据就是

SELECT * FROM users LIMIT 20 OFFSET 3 * 20

在上面的查询中,我们让数据库跳过前 60 行数据(3 页 * 每页 20 行数据),同时限制数据库只查 20 条数据。由此,我们只要能知道当前用户在表格中的哪一页,以及表格一页显示的行数是多少,就可以按上述逻辑进行服务端翻页了。

卡拉云的表格中,pageIndexpageSize 这两个属性正是为服务端翻页而设计的。如果你需要服务器端查询,只需要选中 服务器端查询 然后创建类似以下的查询

SELECT * FROM users LIMIT {{table1.pageSize}} OFFSET {{table1.pageSize * table1.pageIndex}}

即可以让该查询每次只返回 {{table1.pageSize}} 这么多行数据,同时跳过 table1 中已经翻页过的行。当用户点击下一页时,可以触发查询自动执行,从而实现无缝地服务端翻页。

变更列展示类型

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

👍
多种展示类型支持
目前表格支持将列渲染为纯文本(默认),图片和链接

列默认排序和表格排序

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

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

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

调整列顺序

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

更改表格顺序

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

隐藏列

有时,你需要将数据读入后但将某些不重要的列隐藏起来。你可以通过点击列设置的隐藏按钮,将该列隐藏。如果再次点击将取消隐藏将该列展示出来。

引用选择的行

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

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

选择行

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

设置选择单行或多行

在表格中,你可以设置允许用户选择单行或多行,默认为仅允许选择单行。

如果你将这个选项设置为选择多行,那么在对应的 selectedRow.dataselectedRow.index 中将会出现数组值,表示用户选中的行数据和选中的行序号。

比如说,对于数据

[{"name": "宁静"}, {"name": "万茜"}, {"name": "张洁"}]

来说,如果用户选择了第 0 和第 2 行,那么 selectedRow.data 将变为 [{"name": "宁静"}, {"name": "张洁"}],同时 selectedRow.index 将变为 [0, 2]