在前端开发中，分页功能是非常常见的需求。而 app-element-pagination 就是一个非常方便的 npm 包，它提供了友好易用的分页组件，可以帮助我们快速实现分页功能。
安装 app-element-pagination
在命令行中运行如下命令即可安装 app-element-pagination：
npm install app-element-pagination
使用 app-element-pagination
安装完成后，我们需要在代码中引入 app-element-pagination：
import 'app-element-pagination';
然后，在需要使用分页组件的地方，我们可以这样写：
<app-element-pagination current-page="1" page-count="10" visible-page-count="5"> </app-element-pagination>
上面的代码中，我们将 app-element-pagination 组件放在了一个页面中，并设置了以下属性：
current-page：当前页码，初始值为 1。page-count：总页数。visible-page-count：在分页组件中显示的最多页数。
此时，我们可以在页面上看到一个简单的分页组件。
自定义分页组件样式
app-element-pagination 提供了一些默认的样式，但我们可以通过 CSS 来改变分页组件的样式。我们只需要针对相应的 class 进行样式修改即可，如下面这个例子：
-- -------------------- ---- ------- --------------- - -------- ----- ---------------- ------- -------- ----- ----------------- -------- - --------------- -- - ---------------- ----- ------- -- -------- -- - --------------- -- -- - -------- ------------- ------- - ------ - --------------- -- -- - - -------- ------ -------- ------ ----------------- ----- ------- --- ----- ----- ------ ----- ----------- ------- ---------------- ----- -------------- ------ - --------------- -- --------- - - ----------------- ----- ------ ----- - --------------- -- ----------- - - -------- --- ------- ------------ --------------- ----- -
参考示例代码
下面是一个示例代码，演示如何使用 app-element-pagination：
-- -------------------- ---- -------
--------- -----
------
------
----------------------------- ------------
----- ---------------- ---------------
-------
------
---- ------------------
---------------
---- ---------------------------
-----------------------
----------------
---------------
-----------------------
-------------------------
------
------
------- ----------------------
-------
--------- -------------------- ---- ------- ---------- - ------ ---- ------- - ----- ----------- ------- - --- - ----------- ----- - ------------------- - ----------- ----- - --------------- - -------- ----- ---------------- ------- -------- ----- ----------------- -------- - --------------- -- - ---------------- ----- ------- -- -------- -- - --------------- -- -- - -------- ------------- ------- - ------ - --------------- -- -- - - -------- ------ -------- ------ ----------------- ----- ------- --- ----- ----- ------ ----- ----------- ------- ---------------- ----- -------------- ------ - --------------- -- --------- - - ----------------- ----- ------ ----- - --------------- -- ----------- - - -------- --- ------- ------------ --------------- ----- -
import 'app-element-pagination';
结语
差不多就是这样了。app-element-pagination 虽然只是一个小小的 npm 包，但它提供的分页组件却十分好用。在日常开发中，我们可以将它作为分页功能的简便实现，提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557ff81e8991b448d5218