基于ElementPlus二次封装组件-----分页器

1. 分页组件

        由于在开发过程中,我们在后台管理系统中每次都会遇到对应的列表,因此就会有与之对应的分页组件。为了保证系统的一致性,在这里我们就将对应的分页器封装为对应的组件。

2.封装属性

        这里我们采取TS来进行协助封装,封装的属性大致分为如下。当前页,每页展示的条数,修改当前页的方法,修改每页展示的条数的方法,总条数,修改每页展示条数的数组等几个比较核心的属性。由于是父子组件,这里采取的是通过props和emit来进行父子间的信息通行。

3.相关代码

        下面是对应分页器相关的数组,其功能作用适用于大多数常见的列表,比较实用。且也统一了分页器的相关内容






        下面是根据对应封装的组件,调用或者传递对应参数的父组件的代码。这样虽然比直接使用分页器在组件中会相对的比较麻烦,但是却减少了代码量并且也统一了风格,避免出现分页器不规范的情况。


4.总结

        虽然我们使用了elementPlus,但是也可以根据我们实际的需求,来进行统一风格的封装。这样也有利于我们对实际项目开发统一规范。也学习了比较深入的组件间的相互交流。也有利于我们相关的学习。

你可能感兴趣的:(封装组件,vue.js,javascript,elementui)