vue3 基于element plus对el-pagination进行二次封装

这篇具有很好参考价值的文章主要介绍了vue3 基于element plus对el-pagination进行二次封装。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、前言

在vue3项目中,如果每个列表页都敲一遍分页方法,显然是不合理的,那么,下面我将基于element plus对el-pagination进行二次封装,使用vue3语法糖格式,废话不多说,开干。文章来源地址https://www.toymoban.com/news/detail-662422.html

2、在components文件夹中新建pagination.vue文件

<template>
  <div class="pagination">
    <el-pagination 
    	background 
    	:layout="layout" 
    	:pager-count="pagerCount" 
    	:page-sizes="pageSizes" 
    	:page-size="pageSize"
        :total="pageTotal" 
        v-model:currentPage="currentPages" 
        @size-change="sizeChange" 
        @current-change="current"
        @prev-click="prev" 
        @next-click="next"
    ></el-pagination>
  </div>
</template>
 
<script setup>
import { ref, reactive, onMounted } from "vue"
const props = defineProps({
  pageTotal: {
    type: Number,
    default: 0, //总页数
  },
  pagerCount: {
    type: Number,
    default: 5, //如果页数很多大概展示的页码
  },
  layout: {
    type: String,
    default: "total,sizes, prev, pager, next, jumper, ->, slot", //分页组件会展示的功能项
  },
  pageSizes: {
    type: Array,
    default: () => {
      return [10, 20, 50, 100] //指定分页展示条数
    },
  },
  currentPage: {
    type: Number,
    default: 1, //指定跳转到多少页
  },
  pageSize: {
    type: Number,
    default: 10, //每页展示的条数,根据自己实际,且会带入请求
  },
  pageNum: {
    type: Number,
    default: 1, //第几页数据,根据自己实际,且会带入请求
  },
})

let currentPages = ref(props.currentPage)
let pageData = reactive({
  pageSize: props.pageSize,
  pageNum: props.pageNum,
})

const emit = defineEmits(["pageFunc"])

//选择每页显示数量 Change page size
const sizeChange = (val) => {
  pageData.pageSize = val
  emit("pageFunc", pageData)
}
//选择某一页
const current = (val) => {
  pageData.pageNum = currentPages.value
  emit("pageFunc", pageData)
}
//上一页
const prev = () => {
  pageData.pageNum = pageData.pageNum - 1
  emit("pageFunc", pageData)
}
//下一页
const next = () => {
  pageData.pageNum = pageData.pageNum + 1
  emit("pageFunc", pageData)
}
</script>
 
<style scoped lang="less">
.pagination {
  width: 100%;
  background: #fff;
  padding: 5px 0;
  text-align: center;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>

3、在组件内使用分页

<template>
	<pagination 
		v-show="totalRows > 0" 
		:pageNum="queryParams.pageNum" 
		:pageSize="queryParams.pageSize" 
		:pageTotal="totalRows" 
		@pageFunc="pageFunc" 
	/>
</template>
<script setup>
import { reactive, ref } from 'vue'
// 引入分页组件
import Pagination from '@/components/pagination.vue'
// 查询参数
const queryParams = reactive({
	pageNum: 1,
	pageSize: 10,
	organId: '',
	projectName: '',
	projectStatus: '',
	projectLeader: '',
})
// 项目总条数
const totalRows = ref(0)
// 分页回调
const pageFunc = (data) => {
	queryParams.pageSize = data.pageSize
	queryParams.pageNum = data.pageNum
	// 触发获取项目数据函数
	getProjectList()  
}
</script>

到了这里,关于vue3 基于element plus对el-pagination进行二次封装的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包