简介
在前端开发中，数据展示是一个很重要的部分。然而，数据表格展示还存在诸多问题，如布局样式繁琐、数据量大时卡顿等。此时，npm 包 e-ngx-table 可以解决这些问题。e-ngx-table 是一个开源的表格组件库，专注于提供更简单、更快速、更强大的数据表格展示功能。它提供了优质的初始样式、自适应的布局和高性能的渲染，可帮助开发者快速构建带有各种功能的表格。
安装
安装 e-ngx-table 非常简单，只需在终端中运行如下命令：
npm install e-ngx-table --save
引用
这里提供一下基本的引用方式，使用时可以参考：
-- -------------------- ---- ------- ------ - --------------- - ---- -------------- ----------- ------------- --------------- -------- ------------------ ---------- --- ---------- -------------- -- ------ ----- --------- --展开代码
基本使用
e-ngx-table 的基本使用非常方便，只需使用 ng-container 标签和相应的属性即可。具体使用方法如下：
在 HTML 中定义表格
<e-ngx-table [columns]="data.columns" [data]="data.data" [paginationPageSize]="data.pageSize"> <ng-container e-ngx-table-column [column]="column" *ngFor="let column of columns"> </ng-container> </e-ngx-table>
在这个表格中，数据由三个属性组成：
columns：包含所有列的定义，其包含以下数据：
- name：列的名称。
- prop：列的属性名称。
- sortable：布尔值，指定是否启用列排序。
- filterable：布尔值，指定是否启用列过滤。
- resizable：布尔值，指定是否启用列尺寸调整。
data：包含所有数据的数组。
pageSize：每一页显示的数据量。
定义列
在表格定义中，使用 ng-container 实现列的定义。列的定义使用 e-ngx-table-column 属性和列属性进行绑定。列属性主要包含以下几个：
name：列名。
prop：对应数据源中的属性。
width：列宽。
fixed：是否固定列。如果为 left 或 right，则该列将被固定在其父容器的左侧或右侧，从而在水平滚动时保持可见。
sortable：是否可排序。
sortIndex：排序优先级。
filterable：是否可过滤。
cellTemplate：指定单元格模板，用于自定义单元格渲染。
定义单元格模板
e-ngx-table 支持自定义单元格模板。可通过定义一个 ng-template 标签和 e-ngx-table-cell 属性进行绑定。该方法在列属性中独立定义。其方式如下：
<ng-container e-ngx-table-column [column]="templateColumn"> <ng-template e-ngx-table-cell let-rowIndex="rowIndex" let-rowData="rowData"> <b>{{ rowData[templateColumn.prop] }}</b> </ng-template> </ng-container>
在此示例中，定义了一个列，名为 templateColumn 。通过列中的 cellTemplate 指定一个自定义的 ng-template 标签，并使用 e-ngx-table-cell 属性与列中属性进行绑定。在 e-ngx-table-cell 之后，使用 let 关键字定义 rowData 和 rowIndex 变量，分别表示行数据和行号。可以使用这些变量在模板中自定义单元格的渲染。
使用示例
下面这个实例将展示 e-ngx-table 的基本使用方法。该实例中使用了本地的数据源，包含了国家、人口、面积、GDP等信息。在此实例中，展示了一个带有排序、过滤、固定列和自定义渲染的表格。如下所示：
-- -------------------- ---- ------- ----------- ------------------------ ------------------ -------------------------- ------------- ------------------ ----------- ------ -- ------------- ------------------ ------------ ---------------- ----------------------- ---------------------- ----- ------------------- --- -------------- -------------------- --------- ----- ------------------- --- -------------- ------------------- -- -------------------- -- ------- ----- ------------------- --- -------- ------------------------- -- -------------------- -- ------- ----- ------------------- --- ------- ----------------------- -- -------------------- -- ------- ----- ------------------- --- ------------- ------------------------- -- -------------------- -- ------- -------------- --------------- -------------展开代码
在此示例中，我们首先声明了一个 data-table 标签，并使用 [columns]、[data] 和 [paginationPageSize] 定义了其属性。tableColumns 变量定义了表格列的属性，而 tableData 变量包含了所有的数据。e-ngx-table-column 定义了列，用 ngFor 指定列数。
在列属性中，我们使用了 e-ngx-table-filter 来启用过滤功能，e-ngx-table-sort 来启用排序功能，e-ngx-table-fixed 来启用固定列功能，并使用 e-ngx-table-cell 属性与列中的属性进行绑定。我们还使用了 ngIf 指令来根据列展示相应的内容，使用 rowData[column.prop] 取得列中的数据，以显示到单元格中。在 e-ngx-table-cell 之后，我们定义了 rowIndex 和 rowData 变量，以便在模板中使用。
总结
e-ngx-table 是一个功能强大的表格组件。它提供了快速、高性能、自适应和具有扩展性的数据表格功能。通过使用上述示例并按照定义的方法进行操作，可以快速熟悉 e-ngx-table 的使用方法，并能够轻松创建具有各种功能的优质表格。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5d51ab1864dac6710c
