vue+element分页器组件封装
分页组件
<template>
<!-- 分页组件的封装 -->
<div class="pagination">
<el-pagination
@size-change="sizeChange"
@current-change="currentChange"
:page-sizes="[1, 5, 10]"
layout="total, sizes, prev, pager, next, jumper"
:current-page.sync="pageNum"
:page-size="pageSize"
:total="total"
:small="small"
>
</el-pagination>
<!-- layout="total, sizes, prev, pager, next, jumper" -->
</div>
</template>
<script>
export default {
name: "Paging",
data() {
return {
pageNum: 1, //当前页数
};
},
//子组件接收父组件的值
props: {
total: {
//总条目数
required: false, //是否必须
default: 0, //默认值
},
pageSize: {
required: false, //是否必须
default: 10, //默认值(默认显示10条)
},
small: {
//是否使用小型分页样式
required: false, //是否必须
type: Boolean, //类型
default: false, //默认值
},
},
//计算属性 计算属性是基于他们的依赖做缓存
// (如果计算的逻辑大的话,可以用这个,比方说你先循环100次,再循环1000次,他会把上一次的循环也加上去,也就是缓存)
computed: {},
//侦听器 响应数据的变化
watch: {
//监听页数变化
pageNum(val, index) {
console.log(val); //值
console.log(index); //下标
// 改变这个值并不会触发 handleCurrentChange
if (typeof val === "number") {
this.pageNum = val;
}
},
},
methods: {
// 当前页变化
sizeChange(val) {
// console.log(val);
//子组件向父组件传值
this.$emit("sizeChange", val);
},
// size变化
currentChange(val) {
// console.log(val);
//子组件向父组件传值
this.$emit("currentChange", val);
},
},
};
</script>
<style lang="scss" scoped>
.pagination {
margin: 20px 0;
text-align: right;
}
</style>
在页面中使用分页组件
<div v-if="this.total" class="totalclass">
<Paging
:pageNum="this.form.page"
:total="this.total"
:pageSize="this.form.size"
:small="true"
@sizeChange="sizeChange"
@currentChange="currentChange"
></Paging>
</div>
引入组件
import Paging from "@/components/public/paging.vue";
data() {
return {
total: 0,
form: {
page: 1,
size: 10,
},
}
}
事件
//上一页下一页按钮
currentChange(val) {
this.form.page = val;
this.getTable();
},
//每页显示几条数据按钮
sizeChange(val) {
this.form.size = val;
this.getTable();
},
//调取接口
getTable() {
getdatas({//这里是封装的接口
curPage: this.form.page,
pageSize: this.form.size,
}).then((res) => {
if (res.state) {
this.total = res.data.total;
}
});
},
本文介绍了一个基于Vue和Element UI封装的分页组件实例。该组件提供了灵活配置的分页功能,包括调整每页显示的数据数量、当前页码及总记录数等,并通过事件传递与父组件交互实现数据加载。文章详细展示了组件代码结构和页面应用示例。
238

被折叠的 条评论
为什么被折叠?



