前言
mat-table-expander 是一个基于 Angular Material 和 Angular 的 npm 包，旨在为前端开发者提供一个方便易用的表格扩展组件。它可以快速地帮助你在 Angular 应用中创建一个支持行内展开的表格组件，并提供了丰富的自定义选项。本文将介绍 mat-table-expander 的基本用法、配置方式和实例应用，并为读者提供一份完整的教程。
安装和依赖
使用 mat-table-expander 要求：
Angular版本：8 或更高版本Angular Material版本：8 或更高版本
你可以通过以下命令在你的项目中安装 mat-table-expander：
npm install mat-table-expander
并在你的项目中引入 Angular Material：
npm install @angular/material
同时，也要在 app.module.ts 中添加引用：
-- -------------------- ---- -------
------ - ------------------ - ---- ------------------------------
------ - -------------- - ---- --------------------------
------ - ------------------ - ---- ------------------------------
------ - ------------- - ---- -------------------------
---
-----------
------------- -
---
--
-------- -
---
-------------------
---------------
-------------------
-------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -基本用法
在当前组件的 HTML 中，定义表格和数据源：
-- -------------------- ---- -------
------ --------- ------------------------- --------
---- ---- ---
------------- --------------------
--- --------------- ----------------- -------------------------
--- -------- ---------------- ----------------------
---------------
---- ---- ---
------------- ----------------------
--- --------------- ----------------- ---------------------------
--- -------- ---------------- ------------------------
---------------
---- ------ ---
------------- -----------------------
--- --------------- -----------------------
--- -------- ---------------- -------- -------------------
---- ------------------------------------------ ----- ----- --- -------------
-----
---------------
--- -------------- -------------------------- ----------------
--- ------- --------------- ---- -------- -------- -----------------
--- ------- --------------- ---- -------- ------------ --------------------
--------在当前组件的 TS 中，定义表格数据 source：
-- -------------------- ---- -------
------ -------------------- ---- --------------------------
---
------ ----- ----------- ---------- ------ -
----------------- -------- - -------- ----------
---------- - --- --------------------------------------
---------- -
-------------------- - -------------
-
-
----- ------------- ----- - -
------ ----------- ------- --------
------ --------- ------- --------
------ ---------- ------- -------
------ ------------ ------- --------
------ -------- ------- -------
------ --------- ------- --------
------ ----------- ------- --------
------ --------- ------- --------
------ ----------- ------- --------
------ ------- ------- --------
--这样，一个简单的带有行内展开功能的表格就被创建出来了。但是，如果你想更进一步地自定义，例如调整表格 UI、支持外部数据、添加自定义操作等，就需要配置一些参数和钩子事件。
配置
通过在 mat-table 上声明 mat-table-expandable 属性，可以开启 mat-table-expander 的相关配置。我们可以通过以下配置项来自定义表格的展开行功能：
展开行：
matTableExpandableRows：定义需要行内展开的行。
<table mat-table [dataSource]="dataSource"
matSort
mat-table-expandable
[matTableExpandableRows]="matTableExpandableRows">在当前组件 TS 中，定义需要展开的行：
-- -------------------- ---- -------
---------------------- - -
-
--- --
----- -----------
------- -------
------------ --------- -- - -------- ------- ---- ------ - --- ------ ------ -- ---- - -------- ------ ------ -- ------ -------- -- --- -------- ------- -- --- -------- -------
--
-
--- --
----- ---------
------- -------
------------ ------- -- - -------- ------- ---- ------ -- --- ------ ------ -- -- -- - ---------- --------- ---------- ---------- ----- --------- --- ---- ----- --- ----- --- ----- -- --- -------- -------
--
---
--然后在表格定义时，将 matTableExpandableRows 的属性值设置为数据源：
<tr mat-row *matRowDef="let row; columns: ['details']" mat-row-toggle></tr> <div [mat-table-expandable-row]="element">Lorem ipsum dolor sit amet...</div>
matTableExpandedRow：设置默认展开的行。
<table mat-table [dataSource]="dataSource"
matSort
mat-table-expandable
[matTableExpandableRows]="matTableExpandableRows"
[matTableExpandedRow]="matTableExpandedRow">matTableExpandedRow = this.matTableExpandableRows[0];
matTableExpandableRowDetailTemplate：定义 row 详细描述内容的显示模板。
<ng-template matTableExpandableRowDetailTemplate let-element>
<div>
<h5>Description: </h5>
{{element.description}}
</div>
</ng-template>事件：
matTableExpandableRowClick：设置行的点击事件回调函数。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------ - ---- --------------------------
------ - --------------------- - ---- ----------------------------------
------------
---
--
------ ----- ----------- -
---------------------- - -
-
--- --
----- -----------
------- -------
------------ --------- -- - -------- ------- ---- ------ - --- ------ ------ -- ---- - -------- ------ ------ -- ------ -------- -- --- -------- ------- -- --- -------- -------
--
---
--
-- -------------------- ----
----------------- ---------------------- ---- ----- ---- -
---------------- ---------- -----
-
--- -------------------- ---- -------
------ ------------------ -------------------------------------
-------------------------------------------
------------------------------------------------ ------
--- ------- --------------- ---- -------- ---------------------------------
--- ------- --------------------- --------------- ---- -------- -------------
---------------------------- - -----
---------------------------- ------------------- --- ------
--- -------- -------------------
---- ------------------------------------------------------ ----------------------
-----
-----
--------类名：
matTableExpandableRowsExpandedClass：定义展开行的 CSS 类名。
<table mat-table [dataSource]="dataSource"
matSort
mat-table-expandable
[matTableExpandableRows]="matTableExpandableRows"
[matTableExpandedRow]="matTableExpandedRow"
matTableExpandableRowsExpandedClass="expanded">示例
下面是一个完整的 mat-table-expander 实例：
-- -------------------- ---- -------
------ --------- -------------------------
-------
--------------------
-------------------------------------------------
-------------------------------------------
----------------------------------------------
------------------------------------------------ ------
---- ---- ---
------------- --------------------
--- --------------- ----------------- -------------------------
--- -------- ---------------- ----------------------
---------------
---- ---- ---
------------- ----------------------
--- --------------- ----------------- ---------------------------
--- -------- ---------------- ------------------------
---------------
---- ------ ---
------------- -----------------------
--- --------------- -----------------------
--- -------- ---------------- -------- -------------------
---- -------------------------------------
---------------- -----
-----------------------
------
-----
---------------
--- -------------- -------------------------- ----------------
--- ------- --------------- ---- -------- -------- -----------------
--- ------- --------------- ---- -------- ------------ --------------------
---------- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------ - ---- --------------------------
------ - --------------------- - ---- ----------------------------------
------------
---
--
------ ----- ----------- -
----------------- -------- - -------- ----------
---------------------- - -
-
--- --
----- -----------
------- -------
------------ --------- -- - -------- ------- ---- ------ - --- ------ ------ -- ---- - -------- ------ ------ -- ------ -------- -- --- -------- ------- -- --- -------- -------
--
---
--
---------- - --- -----------------------------------------------------
-------------------- ----
----------------- ---------------------- ---- ----- ---- -
---------------- ---------- -----
-
-结语
mat-table-expander 是一个 Angular Material 支持的表格扩展组件，提供了行内展开和其他丰富的自定义选项，方便开发人员将其集成在 Angular 应用中。通过本文中提供的教程，我们可以快速、方便地使用该 npm 包，并根据需要个性化定制，更好地实现 UI 呈现和交互功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600573a081e8991b448e99a0