如何将Vue项目中Element-ui的el-pagination封装成通用的分页组件使用？
- 内容介绍
- 文章标签
- 相关推荐
本文共计562个文字，预计阅读时间需要3分钟。
原因：分页在项目中使用频率非常高，因此将el-pagination封装为一个全局组件。
步骤：
1.在components下面新建一个pagination.vue文件。
2.代码如下：
vue
.pagination { margin-top: 20px;}
查看代码：template: div :class=$style.paginationvue
原因：分页在项目当中使用非常频繁，因此就将el-pagination封装为了一个全局组件
话不多说直接上代码
1.首先在components下面新建一个pagination.vue文件
代码如下：
查看代码
<template>
<div :class="{ hidden: hidden }" class="pagination-container">
<el-pagination
:background="background"
:current-page.sync="currentPage"
:page-sizes="pagesizes"
:page-size.sync="pageSize"
:pager-count="pagerCount"
:layout="layout"
:total="total"
v-bind="$attrs"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</template>
<script>
import { scrollTo } from '@/utils/scroll-to'
export default {
name: 'Pagination',
data() {
return {}
},
props: {
/**
* 总页数
*/
total: {
required: true,
type: Number
},
/**
* 默认当前页
*/
page: {
default: 1,
type: Number
},
/**
* 默认分页大小
*/
limit: {
type: Number,
default: 5
},
/**
* 分页大小
*/
pagesizes: {
type: Array,
default() {
return [5, 10, 20, 30, 50, 100]
}
},
/**
* 移动端页码按钮的数量端默认值5
*/
pagerCount: {
type: Number,
default: document.body.clientWidth < 992 ? 5 : 7
},
/**
* 布局方式
*/
layout: {
type: String,
default: 'total, sizes, prev, pager, next, jumper'
},
/**
*是否显示背景
*/
background: {
type: Boolean,
default: true
},
/**
* 自动滚动
*/
autoScroll: {
type: Boolean,
default: true
},
/**
* 是否隐藏
*/
hidden: {
type: Boolean,
default: false
}
},
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) {
if (this.currentPage * val > this.total) {
this.currentPage = 1
}
this.$emit('pagination', { page: this.currentPage, limit: val })
if (this.autoScroll) {
scrollTo(0, 800)
}
},
handleCurrentChange(val) {
this.$emit('pagination', { page: val, limit: this.pageSize })
if (this.autoScroll) {
scrollTo(0, 800)
}
}
}
}
</script>
<style scoped>
.pagination-container {
background: #fff;
padding: 32px 16px;
}
.pagination-container.hidden {
display: none;
}
</style>
2. 在main.js中我们需要引入，并将该组件注册为全局组件
查看代码
// 自定义分页组件
import Pagination from '@/components/Pagination'
// 全局组件挂载
Vue.component('Pagination', Pagination)
3. 具体使用
查看代码
<!-- 分页 -->
<Pagination
@pagination="pagination"
v-show="total > 0"
:total="total"
:page.sync="currentPage"
:limit.sync="pageSize"
/>
<!--data中代码-->
// 分页信息
currentPage: 1,
pageSize: 5,
total: 0,
<!-- methods中代码 -->
/**
* 请求分页
*/
pagination(p) {
this.fetchDataNoMessage(p.page, p.limit)
},
思路来源
本文共计562个文字，预计阅读时间需要3分钟。
原因：分页在项目中使用频率非常高，因此将el-pagination封装为一个全局组件。
步骤：
1.在components下面新建一个pagination.vue文件。
2.代码如下：
vue
.pagination { margin-top: 20px;}
查看代码：template: div :class=$style.paginationvue
原因：分页在项目当中使用非常频繁，因此就将el-pagination封装为了一个全局组件
话不多说直接上代码
1.首先在components下面新建一个pagination.vue文件
代码如下：
查看代码
<template>
<div :class="{ hidden: hidden }" class="pagination-container">
<el-pagination
:background="background"
:current-page.sync="currentPage"
:page-sizes="pagesizes"
:page-size.sync="pageSize"
:pager-count="pagerCount"
:layout="layout"
:total="total"
v-bind="$attrs"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</template>
<script>
import { scrollTo } from '@/utils/scroll-to'
export default {
name: 'Pagination',
data() {
return {}
},
props: {
/**
* 总页数
*/
total: {
required: true,
type: Number
},
/**
* 默认当前页
*/
page: {
default: 1,
type: Number
},
/**
* 默认分页大小
*/
limit: {
type: Number,
default: 5
},
/**
* 分页大小
*/
pagesizes: {
type: Array,
default() {
return [5, 10, 20, 30, 50, 100]
}
},
/**
* 移动端页码按钮的数量端默认值5
*/
pagerCount: {
type: Number,
default: document.body.clientWidth < 992 ? 5 : 7
},
/**
* 布局方式
*/
layout: {
type: String,
default: 'total, sizes, prev, pager, next, jumper'
},
/**
*是否显示背景
*/
background: {
type: Boolean,
default: true
},
/**
* 自动滚动
*/
autoScroll: {
type: Boolean,
default: true
},
/**
* 是否隐藏
*/
hidden: {
type: Boolean,
default: false
}
},
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) {
if (this.currentPage * val > this.total) {
this.currentPage = 1
}
this.$emit('pagination', { page: this.currentPage, limit: val })
if (this.autoScroll) {
scrollTo(0, 800)
}
},
handleCurrentChange(val) {
this.$emit('pagination', { page: val, limit: this.pageSize })
if (this.autoScroll) {
scrollTo(0, 800)
}
}
}
}
</script>
<style scoped>
.pagination-container {
background: #fff;
padding: 32px 16px;
}
.pagination-container.hidden {
display: none;
}
</style>
2. 在main.js中我们需要引入，并将该组件注册为全局组件
查看代码
// 自定义分页组件
import Pagination from '@/components/Pagination'
// 全局组件挂载
Vue.component('Pagination', Pagination)
3. 具体使用
查看代码
<!-- 分页 -->
<Pagination
@pagination="pagination"
v-show="total > 0"
:total="total"
:page.sync="currentPage"
:limit.sync="pageSize"
/>
<!--data中代码-->
// 分页信息
currentPage: 1,
pageSize: 5,
total: 0,
<!-- methods中代码 -->
/**
* 请求分页
*/
pagination(p) {
this.fetchDataNoMessage(p.page, p.limit)
},
思路来源