第一种:直接在当前页面实现
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="search.pageNum"
:page-sizes="[ 1, 2, 5, 10 ]"
:page-size="search.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
// 监听每页显示条数变化
handleSizeChange(newSize) {
this.search.pageSize = newSize;
this.searchtask();
},
// 监听页码变化
handleCurrentChange(newPage) {
this.search.pageNum = newPage;
this.searchtask();
},
data() {
return {
total: 0, // 数据总条数
// 查询条件
search: {
pageNum:1,
pageSize:10,
name: '',
organizationId: '',
},
}
},
第二种:实现子父传值实现,方便调用,不用每个页面都写一遍该方法
分页抽离公共组件使用:
新建子组件页面:listPagination.vue
<!-- 分页组件 -->
<template>
<!--
background: 背景颜色
size-change: pageSize 改变时会触发
current-change: currentPage 改变时会触发
current-page: 当前页数,支持 .sync 修饰符
page-sizes: 每页显示个数选择器的选项设置
page-size: 每页显示条目个数,支持 .sync 修饰符
layout: 组件布局,子组件名用逗号分隔
total 总条目数
-->
<div class="list-pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="sizes"
:page-size="size"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<!-- cms分页组件 <list-pagination :total="total" :size="size" :sizes="sizes" @change="getPages"></list-pagination>-->
<script>
export default {
name: "list-pagination",
props: {
total: {//总条数
type: Number,
default: 0
},
sizes: {//每页显示条数数组
type:Array,
default: []
},
size:{//初始每页显示条数
type: Number,
default:0
},
current:{//当前页
type: Number,
default:1
}
},
data() {
return {
pageSize: '',//每页显示条数
currentPage: ''//当前页
};
},
created() {
//将页面中初始页面条数赋值给pageSize
//console.log("当前的size数:" + this.size + "当前页面current:" + this.current);
this.pageSize = this.size;
this.currentPage = this.current;
},
methods: {
// 监听每页显示条数变化
handleSizeChange(val) {
this.pageSize = val;
this.$emit("change", this.currentPage, this.pageSize);
},
// 监听页码变化
handleCurrentChange(val) {
this.currentPage = val;
this.$emit("change", this.currentPage, this.pageSize);
}
}
}
</script>
<style scoped>
</style>
父组件页面使用:
<list-pagination
:total="pageData.total"
:size="search.pageSize"
:sizes="pageData.sizes"
:current="search.pageNum"
@change="getPages">
</list-pagination>
export default {
data() {
return {
//分页属性值
pageData: {
total: 0, // 数据总条数
sizes:[10,5]//条数显示切换数组
},
// 查询条件
search: {
pageNum:1,//当前页面
pageSize:10,//每页显示条数
name: '',
organizationId: '',
}
}
},
}
//分页请求查询
getPages(pageNo, pageSize){
//console.log("当前页:" + pageNo + ",当前条数:" + pageSize);
//将当前的分页信息赋值给search
this.search.pageSize = pageSize;
this.search.pageNum = pageNo;
//调用党员条件查询方法
this.searchtask();
},
//条件查询数据
async searchtask() {
//console.log("当前页1:" + this.search.pageNum + ",当前条数1:" + this.search.pageSize);
const {data: res} = await this.$http.post('partyManagement/showByName', this.$qs.stringify(this.search));
// console.log('循环列表数据'+res.data.list);
this.iconList = res.data.list;
this.iconList.forEach(element => {
this.options1.forEach(item => {
if(element.job === item.code){
element.jobName = item.name;
}
})
});
this.pageData.total = res.data.count;
},