记录vue中封装一下Element组件的分页方法

110 阅读1分钟

首先我们的vue中已经引入了组件哦!平时感觉分页太复杂,随便拿来封装使用!只需两步搞定!so easy!

第一步在components里新建一个公共组件,然后就可以封装一下分页喽。非常简单!

html部分

image.png

js部分非常简单只是通过computed里通过get和set来计算分页大小和页码,然后通过方法来传给父组件

屏幕截图 2022-03-31 112501.jpg 屏幕截图 2022-03-31 112631.jpg

第二步在main.js全局配置一下,或者在单页面import引入,我这里在main.js全局引入

屏幕截图 2022-03-31 113607.jpg

好啦!可以在页面直接使用啦!!! total--页码,pagelimit 不要忘了加.sync修饰符 再加一个点击事件通过getLIst方法里面处理数据就OK啦!

屏幕截图 2022-03-31 114049.jpg