简介
ng2-table-custom 是一个 Angular 2 及以上版本的表格组件。其支持自定义表头、排序、搜索等功能，且能够为您的 Web 应用提供更好的表格展示效果。
安装
使用 npm 安装：
--- ------- ---------------- ------
使用
在代码中引入 ng2-table-custom：
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - -------------------- - ---- -------------------
-----------
-------- --------------- ----------------------
------------- ---------------
---------- --------------
--
------ ----- --------- - -在 HTML 文件中调用组件，并设置数据、表头等参数：
----------------- ------------- ------------------- -------------------- -------------------
其中，data 参数为表格数据，columns 参数为表头信息，pagination 参数表示是否启用分页。
自定义表头
您可以设置更加自定义的表头信息，如下所示：
------- - -
- ------ ----- ----- ---- --
- ------ ----- ----- ------ --
- ------ ----- ----- ------- --
- ------ ------- ----- ------------ -
--在设置表头信息时，您可以设置表头的标题、字段名称以及样式等信息。
排序
您可以为表格实现按照某些字段排序的功能，如下所示：
----------------- ------------- ------------------- ----------------- -------------------
启用排序后，您可以设置默认排序字段、排序方式等信息。
搜索
您可以为表格实现按照某些字段搜索的功能，如下所示：
----------------- ------------- ------------------- ------------------- -------------------
启用搜索后，您可以设置搜索框的位置、提示信息、搜索字段等信息。
其他
ng2-table-custom 还支持更多功能，如导出表格数据、禁用某些字段等，具体请参考官方文档。
示例代码
------ - --------- - ---- ----------------
------------
--------- -----------
--------- ------------------ ------------- ------------------- ---------------- ----------------------------------------
--
------ ----- ------------ -
---- - -
- --- -- ----- ----- ------ --------------------- ----------- ------------ --
- --- -- ----- ----- ------ ----------------- ----------- ------------ --
- --- -- ----- ----- ------ ------------------- ----------- ------------ -
--
------- - -
- ------ ----- ----- ---- --
- ------ ----- ----- ------ --
- ------ ----- ----- ------- --
- ------ ------- ----- ------------ -
--
-结语
ng2-table-custom 是一个十分方便的表格组件，能够为您的 Web 应用提供更好的表格展示效果。希望本文能够帮助您更好地使用 ng2-table-custom。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055fe881e8991b448dd8da