项目场景：

将 element-ui 中分页封装成公共组件

描述：

admin后台中会有很多的表格以及分页的应用，所以考虑将分页分装成公共组件

<!--封装组件  vue页面-->
<!--
1. background   是否为分页按钮添加背景色 接受boolean类型
2. current-page  当前页数，支持 .sync 修饰符  接受类型 number
3. page-size    每页显示条目个数，支持 .sync 修饰符    number
4. page-sizes   每页显示个数选择器的选项设置  number[]    —   [10, 20, 30, 40, 50, 100]
5. total    总条目数    number
6. size-change  pageSize 改变时会触发
7. current-change   currentPage 改变时会触发-->
<template><div><el-pagination:background="background":current-page.sync="currentPage":page-size.sync="pageSize":layout="layout":page-sizes="pageSizes":total="total"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div>
</template>
<script>
export default {name: 'Pagination',props: {total: {required: true,type: Number},page: {type: Number,default: 1},limit: {type: Number,default: 20},pageSizes: {type: Array,default() {return [10, 20, 30, 50]}},layout: {type: String,default: 'total, sizes, prev, pager, next, jumper'},background: {type: Boolean,default: true},},computed: {currentPage: {get() {return this.page},set(val) {this.$emit('update:page', val)}},pageSize: {get() {return this.limit},set(val) {this.$emit('update:limit', val)}}},methods: {handleSizeChange(val) {//this.$emit('pagination', { page: this.currentPage, limit: val })this.$emit('pagination')},handleCurrentChange(val) {//this.$emit('pagination', { page: val, limit: this.pageSize })this.$emit('pagination')}}
}
</script>

<!-- main.js引用 !-->
import Pagination from "@/components/Pagination";
// 全局组件挂载
Vue.component('Pagination', Pagination)

<!-- 父页面引用 !-->
<template>
<paginationv-show="total > 0":total="total":page.sync="queryParams.pageNum":limit.sync="queryParams.pageSize"@pagination="getList"
/>
</template>
<script>
export default {data() {return {total: 0,queryParams: {pageNum:1,pageSize:10},}},mounted(){this.getList()},methods:{getList(){//表格接口}}
</script>

封装element分页组件相关推荐

基于jquery的php分页,基于jQuery封装的分页组件
前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...
解决element 分页组件，搜索过后current-page 绑定的数据变了，但是页面当前页码并没有变的问题
解决element 分页组件,搜索过后current-page 绑定的数据变了,但是页面当前页码并没有变的问题参考文章: (1)解决element 分页组件,搜索过后current-page 绑定的 ...
用vue自己封装一个分页组件
准备知识:全局配置组件(本文不赘述,可自行百度) 先来看下效果. 非常简单的效果.事件上仅改变页码,无其他. 1.新建文件pagination.vue.简单解释下:先写DOM结构和样式,接着是事件. ...
element分页组件，搜索过后current-page 绑定的数据变了，但是页面当前页码并没有变的问题
情景: 1 就是在搜索过后的当前页数据变化了,原本的分页当前页并不会改变,这就会遇见一个问题,首次展示停留在第5页,搜索过后的数据并没有5页,不论前台分页或后台分页,页面都会展示:暂无数据! 但其实是 ...
【vue分页功能】vue element 分页组件简简单单实现分页功能详细教学
文章目录 vue分页功能实现一.直接上代码二.需要注意的事项 vue分页功能实现一.直接上代码 // 列表结构 // 重点:data="pageList" <el-ta ...
vue element-ui之分页组件的封装
目录为什么要封装分页组件? 分页组件的封装如何使用? 为什么要封装分页组件? 分页组件用的最多的就是和表格一起,构成表格数据的翻页显示,当然也不仅限于表格,例如其它的流式加载.图片分批次加载等,都 ...
vue手动封装分页组件
单独封装一个分页组件,进行全局注册,在需要使用的组件中进行引入,达到复用提高效率 1. total,总条数 (外部使用Pagination组件的区域传递进来的数据)2. pageSize,每页显示多少 ...
vue element Pagination分页组件二次封装
vue+element 的分页组件封装 1.在components中创建GlobalPagination文件夹,代码如下 <template><div :class="{' ...
Vue3 element-ui实现Pagination分页组件--封装分页
什么是Pagination分页组件? 在 B 端的 web 开发中,分页组件或者叫分页器,是较为常用的控件之一,通常配合表格或列表,实现数据量大的情况下,分页拆解数据的功能. 1.scrollTo和滚 ...

封装element分页组件

项目场景：

描述：

封装element分页组件相关推荐

最新文章

热门文章