介绍
业务常见组件库 Angular 版本，集成常见业务组件，如表格、分页、对话框等，提供多个语言支持。
安装
使用 npm 安装 business-elements-angular
npm i business-elements-angular
使用
导入模块
业务组件库提供一个 BusinessElementsModule 模块，导入该模块后才能使用业务组件。在 app.module.ts 中导入：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - ---------------------- - ---- ---------------------------- ----------- ------------- - ------------ -- -------- - -------------- ---------------------- -- ---------- - ------------ - -- ------ ----- --------- - -
使用组件
表格
<div class="table-container">
<be-table [columns]="columns" [dataSource]="dataSource"></be-table>
</div>-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- ----------------- - ---- ----------------------------
------------
--------- ------
------------ -----------------------
--
------ ----- ------------ -
-------- --------------- - -
- ------ ----- --------- -------- ------ -- --
- ------ ----- --------- ------ -
--
----------- ------------------- - -
- ------ -- ----- ------- --
- ------ -- ----- -------- --
- ------ -- ----- -------- -
--
-分页
<div class="paginate-container">
<be-pagination [pageSize]="pageSize" [total]="total" [(page)]="page" (pageChange)="search()"></be-pagination>
</div>-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------ - ---- ----------------------------
------------
--------- ------
------------ -----------------------
--
------ ----- ------------ -
-------- - ---
----- - ---
---- - --
-------- -
-- ------ -------- -----
-
-对话框
<button (click)="showModal()">打开对话框</button> <be-dialog [visible]="visible" (cancel)="handleCancel()" (ok)="handleOk()"> <div>这是一个对话框</div> </be-dialog>
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- ----------------------------
------------
--------- ------
------------ -----------------------
--
------ ----- ------------ -
------- - ------
----------- -
------------ - -----
-
-------------- -
------------ - ------
-
---------- -
------------ - ------
-
-指南
1. 表格
表格是业务系统中经常用到的组件。业务组件库的表格支持懒加载数据和本地数据，在使用时需要注意：
懒加载数据
当数据量很大时，可以采用通过后端进行分页查询的方式，只加载需要显示的数据。在使用懒加载表格时，需要传入一个回调函数，该函数会在用户切换页码时被调用：
<div class="table-container">
<be-table [columns]="columns" [dataSource]="dataSource" [lazyLoad]="true" [dataLoad]="_loadData"></be-table>
</div>_loadData(page: number, pageSize: number): Promise<BeTableDataSource[]> {
// 根据 page 和 pageSize 查询数据
return Promise.resolve([]);
}本地数据
当数据量比较小时，可以直接将全部数据加载到前端进行显示。在使用本地数据表格时，只需要将 lazyLoad 属性设为 false 即可：
<div class="table-container">
<be-table [columns]="columns" [dataSource]="dataSource" [lazyLoad]="false"></be-table>
</div>2. 分页
分页组件是用来将一个大的数据集合分成多个小的数据块进行显示的，比如一页显示 10 条记录。在使用分页组件时需要传入三个参数：
pageSize：每页显示的记录数total：数据总数page：当前页码
还可以监听分页组件的页码改变事件，当页码改变时会触发 pageChange 事件：
<div class="paginate-container">
<be-pagination [pageSize]="pageSize" [total]="total" [(page)]="page" (pageChange)="search()"></be-pagination>
</div>-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------ - ---- ----------------------------
------------
--------- ------
------------ -----------------------
--
------ ----- ------------ -
-------- - ---
----- - ---
---- - --
-------- -
-- ------ -------- -----
-
-3. 对话框
对话框是一种常用的界面组件，用于显示弹出窗口、提示框、操作确认等。业务组件库提供了一个 be-dialog 组件，在使用时需要传入两个函数：
cancel：点击取消按钮时执行的函数ok：点击确认按钮时执行的函数
同时通过 visible 属性控制对话框的显示和隐藏：
<button (click)="showModal()">打开对话框</button> <be-dialog [visible]="visible" (cancel)="handleCancel()" (ok)="handleOk()"> <div>这是一个对话框</div> </be-dialog>
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- ----------------------------
------------
--------- ------
------------ -----------------------
--
------ ----- ------------ -
------- - ------
----------- -
------------ - -----
-
-------------- -
------------ - ------
-
---------- -
------------ - ------
-
-总结
通过本文的介绍，我们了解了 npm 包 business-elements-angular 的使用方法，逐一介绍了其中的表格、分页和对话框组件，并提供了详细的使用示例和指南。这些组件在实际开发的过程中尤其常用，能够提升开发效率和优化用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8dccdc64669dde54ea