需求:因为需要用到表单查询的地方太多了,所以为了避免每个页面都写分页组件,直接封装好调用就完事了,简简单单
1.创建Pigination.vue公用组件
<template>
<div :class="{ hidden: hidden }" class="pagination-container">
<el-pagination
:background="background"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:layout="layout"
:page-sizes="pageSizes"
:total="total"
v-bind="$attrs"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></el-pagination>
</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, 100];
},
},
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, size: val });
},
handleCurrentChange(val) {
this.$emit("pagination", { page: val, size: this.pageSize });
},
},
};
</script>
<style scoped>
.pagination-container {
background: #fff;
padding-top: 10px;
}
.pagination-container.hidden {
display: none;
}
</style>
2.需要使用分页组件的页面调用
<template>
<div class="content-box">
<div class="container">
<p>主体页面 2 - 2</p>
<div class="table-container">
<el-table
ref="Table2"
:data="list"
style="width: 100%;"
show-overflow-tooltip="true"
@selection-change="handleSelectionChange"
border
>
<el-table-column type="selection" align="center"></el-table-column>
<el-table-column label="操作" width="120" align="center" fixed="right"> </el-table-column>
</el-table>
</div>
<!-- 分页组件 -->
<Pagination :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList"></Pagination>
</div>
</div>
</template>
<script>
import Pagination from '@/components/common/Pagination';
import { testApi } from '@/api/test';
const defaultListQuery = {
pageNum: 1,//给后端的数据,可以根据后端需要更改
pageSize: 10,
keyword: ''
};
export default {
data() {
return {
listQuery: Object.assign({}, defaultListQuery),//浅拷贝,引用数据类型相互影响
list: [],
total: 0,
listLoading: true,
selectedList: []
};
},
components: {
// 注册分页
Pagination
},
created() {
this.getList();
},
methods: {
getList() {
// 获取数据列表
this.listLoading = true;
testApi(this.listQuery).then(res => {
this.listLoading = false;
this.list = res.data.list;
this.total = res.data.total;
});
},
handleSelectionChange(val) {
// 批量选择行数
this.selectedList = val;
}
}
};
</script>
3.结果
文章到此结束,希望对你有所帮助~