简介
ncm-smart-table-test 是一款基于 Angular 的数据表格控件，使用了 Angular Material 的绘制形态，支持自定义样式并提供了多种功能。
安装
npm i ncm-smart-table-test
使用方法
导入模块
在项目中使用 ncm-smart-table-test 需要先导入相关的 Angular 模块：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - -------------------- - ---- -----------------------
-----------
------------- -
------------
--
-------- -
--------------
--------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在组件中使用
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
--------------------- ------------------------- ---------------------------------------------------------
-
--
------ ----- ------------- -
---------- - -
- ----- ----- ---- --- ------- --- --
- ----- ----- ---- --- ------- --- --
- ----- ----- ---- --- ------- --- -
--
-------------- - -------- ------ ----------
-自定义样式
通过在 Angular 组件的样式文件中定义相应的样式类名来自定义表格控件的样式，具体可参考 Angular Material 的样式自定义。
功能
ncm-smart-table-test 提供了以下功能：
- 分页
- 排序
- 过滤
- 多选
- 单选
下面通过示例代码演示如何使用上述功能。
分页
<app-smart-table-test [dataSource]="dataSource" [displayColumns]="displayColumns" [paginated]="true"></app-smart-table-test>
排序
<app-smart-table-test [dataSource]="dataSource" [displayColumns]="displayColumns" [sortable]="true"></app-smart-table-test>
过滤
<app-smart-table-test [dataSource]="dataSource" [displayColumns]="displayColumns" [filterable]="true"></app-smart-table-test>
多选
<app-smart-table-test [dataSource]="dataSource" [displayColumns]="displayColumns" [selectable]="true" [multiSelect]="true"></app-smart-table-test>
单选
<app-smart-table-test [dataSource]="dataSource" [displayColumns]="displayColumns" [selectable]="true" [multiSelect]="false"></app-smart-table-test>
总结
ncm-smart-table-test 是一款功能丰富的 Angular 数据表格控件，可用于各种项目中，使用简单方便。在使用过程中应注意与项目中其他控件的兼容性，尽量不要使用过多的自定义样式类，保证项目整体样式的一致性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c2b81e8991b448d9ca5