vue+element 分页封装的实现示例
更新时间：2023年07月27日 09:04:56 作者：Wh1T3ZzT
本文主要介绍了vue+element 分页封装的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
项目场景
分页也是我们在实际应用当中非常常见的存在，其实分页本身在element中做的就挺好的了，但是使用确实非常的多，所以还是有必要封装一下，主要是为了减少代码的冗余，以及提升开发的效率和降低后续维护的成本。
认识分页
这是一段普通分页的示例
<template>
<div class="block">
<span class="demonstration">完整功能</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
</template>
<script>
export default {
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
},
data() {
return {
currentPage: 4
};
}
}
</script>效果是这样的
在这当中用到了我们常用的七个字段：
1.current-page
:current-page="currentPage"
代表的是当前在第几页，并且可以输入进行跳转任意存在的页数，主要效果如下：
2.page-sizes
:page-sizes="[100, 200, 300, 400]"
用于设置分页每页显示多少条，主要效果如下：
3.page-size
:page-size="100"
设置默认显示多少条（这里默认为100条），主要效果如下：
4.layout
layout="total, sizes, prev, pager, next, jumper"
用于设置组件布局，子组件名用逗号分隔，效果如下：
字段说明：
- total ： 总页数
- sizes：一页显示多少条
- prev：上一页
- pager：点击页数跳转（只允许跳转上下两页以及起止页）
- next：下一页
- jumper：输入跳转任意存在页
5.total
:total="400"
展示总页数，效果如下。
6.size-change
@size-change="handleSizeChange"
7.current-change
@current-change="handleCurrentChange"
触发事件，currentPage 改变时会触发，也就是修改每页显示多少条时触发。
封装分页
弄清楚每个字段的意思后便可以进行封装了。主要思路是，封装的组件通过父组件将currentPage，total，sizes，pager，jumper传入，并且在触发@size-change，@current-change事件时，将事件信息传给父组件。
创建paging
进行封装
<!--
author:Wh1T3ZzT
component:分页
time:2023/07/25
-->
<template>
<div class="paging">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
:layout="layout"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
data(){
return{
}
},
props:{
currentPage:{
default(){
return [];
}
},
pageSizes:{
default(){
return [];
}
},
pageSize:{
default(){
return [];
}
},
layout:{
default(){
return [];
}
},
total:{
default(){
return [];
}
}
},
methods:{
handleSizeChange(val) {
this.$emit('handleSizeChange',val)
console.log(`传给父组件：每页 ${val} 条`);
},
handleCurrentChange(val) {
this.$emit('handleCurrentChange',val)
console.log(`传给父组件：当前页: ${val}`);
},
}
}
</script>
<style>
</style>封装完成！
页面中使用：
引入
<template>
<div>
<Paging
:currentPage="1"
:pageSizes="[5,10,20,50,100]"
:pageSize="10"
layout="total, sizes, prev, pager, next, jumper"
:total="10"
@handleSizeChange="PagingSizeChange"
@handleCurrentChange="PagingCurrentChange"
></Paging>
</div>
</template>
<script>
import Paging from '@/components/paging/index.vue'
export default {
methods:{
PagingSizeChange(val){
console.log(`父组件接收到每页: ${val} 条`);
},
PagingCurrentChange(val){
console.log(`父组件接收到当前页: ${val}`);
},
}
}
</script>效果
到此这篇关于vue+element 分页封装的实现示例的文章就介绍到这了,更多相关vue element 分页封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
Element Plus，由饿了么大前端团队开源出品的一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的组件库，Element Plus是基于Vue3面向设计师和开发者的组件库，提供了配套设计资源，帮助你的网站快速成型2022-12-12
这篇文章主要介绍了总结vue映射的方法与混入的使用过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue 虚拟DOM的相关资料，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
这篇文章主要为大家详细介绍了Vue实现省市区三级联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
VUE2响应式原理使用Object.defineProperty缺点
这篇文章主要为大家介绍了VUE2响应式原理使用Object.defineProperty缺点示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
Vue开发模式是一种基于Vue.js框架的开发方式,它可以帮助开发者更高效地构建和维护复杂的Web应用程序,下面这篇文章主要给大家介绍了关于vue关闭开发模式提示的简单解决办法,需要的朋友可以参考下2024-04-04
VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的2019-11-11
本文介绍了如何使用Vue实现下拉框的多选功能,实现了在选择框中选择多个选项的功能,文章详细介绍了实现步骤和示例代码,对于想要了解如何使用Vue实现下拉框多选功能的读者具有一定的参考价值2023-08-08
这篇文章主要为大家详细介绍了Vue实现双向数据绑定的方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了vue如何查找数组中符合条件的对象，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最新评论