在现代的 Web 开发过程中，构建优秀的 UI 是一个不可或缺的套路。其中，将大量数据以表格的形式展示是一种很普遍的做法。但纯手写表格组件会比较繁琐，所以我们可以使用 npm 包 ember-light-table-addon，它提供了一些便捷的 API 和易于扩展的属性来快速建立表格，并允许我们自定义样式和数据。
安装
在开始使用 ember-light-table-addon 前，你需要先使用 npm 进行安装，打开你的终端，执行以下命令：
npm install —save ember-light-table-addon
安装完以后，就可以在 ember 应用程序里使用这个 addon 了。
基础使用
首先，我们需要在需要展示表格的 controller 中注入一些表格所需的数据。假设我们需要展示一个包含人名、年龄、地址的表格：
-- -------------------- ---- -------
------ ---------- ---- --------------------
------ ------- -------------------
----------- -
- ----- ----- ---- --- -------- ---- --
- ----- ----- ---- --- -------- ---- --
- ----- ----- ---- --- -------- ---- --
-- -------
-
---接下来，在模板文件中，我们可以使用以下的语法来创建表格：
-- -------------------- ---- -------
-------------- -- ------
---------- -- -----
-------- -- -------
----------------------------
----------------------------
----------------------------
----------
------------
---------- -- -----
------- ---------------- -- ----------
-------- -- -------
-----------------------------------------
----------------------------------------
--------------------------------------------
----------
---------
------------
----------------这样，一个简单的表格就轻松完成了！
进阶使用
但是，在实际开发过程中，我们常常需要展示一些比较复杂的数据，比如带操作按钮、可以排序的数据，这个时候，light-table-addons 就提供了一些优美的解决方案：
以下示例中的
peopleList同上述基础示例。
带操作按钮的表格
我们来为人名、年龄、地址添加一些操作按钮，如下：
-- -------------------- ---- -------
-------------- -- ------
---------- -- -----
-------- -- -------
----------------------------
----------------------------
----------------------------
----------------------------
----------
------------
---------- -- -----
------- ---------------- -- ----------
----------------- -- -----
-------- -- -------
-----------------------------------------
----------------------------------------
--------------------------------------------
-------------
---------- ------------- -------------------------
----------- ---- ------------- --------- ----------- ------------ --------------
-------------
----------
-------- -- -------
----- --------- ----
----------
-------------------
---------
------------
----------------这里，我们在操作单元格中添加了一个编辑按钮，以及一个样式为危险的删除按钮。你可以查看 bootstrap#按钮组件 来获取更多操作按钮的使用方式。
带排序的表格
我们可以针对年龄和地址添加排序功能。首先，在控制器的 init 方法中，添加如下代码：
-- -------------------- ---- -------
------ ---------- ---- --------------------
------ - - - ---- ---------------
------ ------- -------------------
-- ---
------ -
--------------------------
-------------------- -------
----------------------- ------
----------------------- --------------------
-
---注意到我们添加了一些用于排序的属性，其中 sortedBy 负责指定按照哪个字段进行升序或降序排序，而 isAscending 声明是否按照升序排列，sortedItems 则是一个利用 A() 方法包装了 peopleList 属性并赋给控制器的新数组。
接着，我们需要将排序代码添加到模板文件中去。修改前的表头行：
{{#h.row as |row|}}
{{#row.cell}}姓名{{/row.cell}}
{{#row.cell}}年龄{{/row.cell}}
{{#row.cell}}地址{{/row.cell}}
{{#row.cell}}操作{{/row.cell}}
{{/h.row}}修改后的表头行：
{{#h.row as |row|}}
{{#row.cell onClick=(action (mut controller.sortedBy) "name")}}姓名{{/row.cell}}
{{#row.cell onClick=(action (mut controller.sortedBy) "age")}}年龄{{/row.cell}}
{{#row.cell onClick=(action (mut controller.sortedBy) "address")}}地址{{/row.cell}}
{{#row.cell}}操作{{/row.cell}}
{{/h.row}}当用户点击表格中的表头时，相应的列就被排序了。如果你希望实现升序排列，那么可以修改表头行如下：
-- -------------------- ---- -------
-------- -- -------
----------- --------------- ---- -------------------- ------------------------
----------- --------------- ---- -------------------- -----------------------
----------- --------------- ---- -------------------- ---------------------------
-------------
--
---- ---------------------- --- -----
-------------
----------自定义样式
当然，在实际使用的时候，我们经常会希望表格看上去更加美观。这里，我们可以使用 Bootstrap 中的表格样式来美化我们的页面。在头部引入 Bootstrap 的 css 文件以后，可以修改表格的代码如下：
-- -------------------- ---- -------
-------------- -- ------
------ --------------
---------- -- -----
-------
-------- -- -------
----------- -----------------------------------------
----------- -----------------------------------------
----------- -----------------------------------------
----------- -----------------------------------------
----------
--------
------------
---------- -- -----
-------
------- ----------------- -- ----------
----------------- -- -----
-------- -- -------
-----------------------------------------
----------------------------------------
--------------------------------------------
-------------
----- --------------- -------------------------------------------------------
----- --------------- ------------------------------------------------------------
------------- ---------- ------ ----------- -------- ----------- ---------------------------
-------------
----------
-------- -- -------
----- --------- ----
----------
-------------------
---------
--------
------------
--------
----------------上述代码中，我们将 lt.head 和 lt.body 包装在了一个 table 标签中，并针对 h.row 和 b.expanded-row 中的 row.cell 进行了样式配置。你可以通过修改这些样式属性来实现自己的需求。
总结
到这里，我们介绍了如何简单地使用 ember-light-table-addon 构建表格，并提供了一些常见的使用场景示例。如果你需要更深入地了解 ember-light-table-addon 的更多细节，请查阅官方文档，敬请期待表格定制的趣味和便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055db681e8991b448db74a