在前端开发中，有很多时候需要使用到表格。而 Angular5-Spreadsheet 包可以让我们更方便地使用表格功能。它提供了一些列的组件，可以让开发人员轻松创建和使用表格，并且还可以自定义样式和事件。
安装和配置
安装 angular5-spreadsheet 模块可以使用 npm 工具：
npm install angular5-spreadsheet
安装完毕后，需要将相应的组件引入到 app.module.ts 中：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------ - ---- ------------------ ------ - ----------------- - ---- ----------------------- ----------- ------------- --------------- -------- -------------------- ---------- --- ---------- -------------- -- ------ ----- --------- --
创建表格
要创建一个表格，可以在 HTML 文件中添加以下内容：
<app-spreadsheet
[data]="tableData"
[columns]="tableColumns"
[config]="tableConfig"
(select)="onSelect($event)">
</app-spreadsheet>在以上代码中，tableData 表示表格中的数据，tableColumns 表示表格的列定义，tableConfig 表示表格的配置信息。onSelect($event) 表示选中了表格的某个单元格时所触发的事件。
数据和列的定义
在组件的类型定义中，需要定义 data 和 columns 属性：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
----------------
------------------
------------------------
----------------------------
------------------
-
--
------ ----- ------------ -
--------------- - -
----------- ------- --------- -------
----------- ------- --------- ------
--
------------------ - -
-------- ------ ------ ------ ------------ ------ -----
-------- ----- ------ ------ ----------- ------ ----
--
--------------- -
-------------------
-
-在以上的代码中，tableData 在定义时是一个类型为 any[] 的数组，存放了表格中的数据。tableColumns 也是一个类型为 any[] 的数组，定义了表格的列，其中每个元素都是一个对象，包含了 header、field 和 width 三个属性。header 表示列的标题，field 表示列对应的数据字段名，width 表示列的宽度。
配置表格
要配置表格，可以在组件定义中加入 config 属性：
tableConfig:any = {
selectionMode: 'single',
editable: true
};以上代码中，selectionMode 表示表格的选择模式，可以设置为 'single'、'multiple' 或 'none'。editable 表示表格是否可编辑。
自定义样式
为表格设置样式可以使用 CSS 文件。表格在 HTML 中被渲染成一个 <table> 元素，所以可以使用 CSS 规则来定义其样式：
-- -------------------- ---- -------
----- -
----------------- -----
---------------- ---------
--------------- --
------ -----
-
--- -- -
------- --- ----- -----
-------- ----
----------- -----
-
-- -
----------------- -----
------ -----
------------ -----
----------- -------
-
------- -
----------------- -----
-以上代码中，设置了表格的边框、行高、字体颜色等常用样式，还可以使用 .edit 类为表格中的某个单元格设置特殊的样式。
结语
本文已经介绍了 npm 包 angular5-spreadsheet 的使用教程，包括如何安装和配置、如何创建表格、如何定义数据和列、如何配置表格和如何自定义样式。它可以让我们更加高效地使用表格功能，并且可以提高表格的美观度和交互性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056be281e8991b448e5939