ElementPlus之封装分页器

话不多说，直接上代码

1.首先先创建一个公共组件

<template><div class="pagination"><el-paginationbackground: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, 30, 40, 50, 100]; //指定分页展示条数},},currentPage: {type: Number,default: 1, //指定跳转到多少页},pageSize: {type: Number,// default: 1, //每页展示的条数，根据自己实际，且会带入请求},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%;padding: 20px 0;text-align: center;margin: 0 auto;display: flex;flex-direction: column;align-items: center;
}
</style>

2. 在组件内使用

  <HotelPaginationTemplate:pageSize="page.pageSize":layout="layout":pageTotal="page.total"@pageFunc="pageFunc"/>let page = reactive({// 放置页码及相关数据pageNum: 1, //当前页pageSize: 5, //每页条目数total: 0, // 记录总数
});
let layout = "total,sizes, prev, pager, next, jumper, ->, slot"; //分页组件会展示的功能项const pageFunc = (data) => {page.pageSize = data.pageSize;page.pageNum = data.pageNum;initialization();  // 触发获取数据函数
};

ElementPlus之封装分页器相关推荐

用vue封装分页器，让你的页面简单而不失优雅
前言当我们在开发 web 应用时,经常需要对大量数据进行分页展示,这时候用到的就是分页器.element 是一款流行的前端 ui 框架,它提供了许多有用的工具和组件,其中就包括分页器组件.在本文中, ...
原生JS封装分页器组件
应用样式: 分页器组件: <template><div id="pagination"><div class="el-row"&g ...
vue遇到的小问题，封装功能
vue vue 首页加载空白页使用vue骨架屏使用骨架屏插件 vue 大数据卡顿 vue 样式初始化normalize.css token过期,无感知刷新 token过期后,Token 刷新并发处 ...
vue2核心以及面试题讲解（组件通信方式，分页器，防抖节流）
1. vue过渡动画 vue提供过渡动画效果,过渡动画效果[原生DOM标签.自定义标签(组件)] 前提:标签.组件必须使用v-if | v-show,让元素可以显示与隐藏在template标签中使 ...
手写一个简单的分页器
封装分页器 1. 前言分页器基本上是任何网站必须要有的一个组件,为什么需要分页器,当后台传入了大量的数据,那么在前端拿到数据,如果直接展示很有可能或造成卡顿,同时消耗过多的内存,给用户带来的浏览效果 ...
el-upload上传文件
el-upload上传文件前言公司和学校项目都用到了上传文件的功能,记录一下. 准备 express实现的上传接口 const express = require('express'); // ...
尚品汇前端每日跟练笔记
尚硅谷商品笔记 (天数是为了和视频分区,不是真实学习天数) Day1 1.vue-cli脚手架初始化项目 node + webpack + 淘宝镜像cnpm node_modules文件夹: 项目依赖 ...
尚硅谷--尚品汇项目笔记
文章目录项目核心一.项目准备二.脚手架目录作用三.项目的其他配置四.路由的分析 1.路由组件的搭建 2.配置路由 3.路由组件和非路由组件区别: 4.路由的跳转 5.路由传参 6.路由传递参 ...
vite+vue3+ts项目搭建之集成qiankun让其成为子应用模板(vite+vue3+ts+qiankun项目)—新增主应用在线地址可以进入vue2/vue3子应用
前言以下操作,是续接之前第四步 --即:vite+vue3+ts+pinia+element-plus项目已完成搭建好,可以直接业务开发了主应用技术栈:vue2+webpack+js 集成qia ...

ElementPlus之封装分页器

ElementPlus之封装分页器相关推荐

最新文章

热门文章