Vue3+ElementPlus 表格分页组件封装

第一步新建公共组件pagination.vue

<template>
	<!-- 分页 -->
	<el-pagination
	   background
	  @size-change="handleSizeChange"
	  @current-change="handlePageChange"
	  :page-sizes="[10, 30, 100]"
	  :page-size="pagesize"
	  :layout="layout"
	  :total="total">
	</el-pagination>
</template>

<script>
	export default {
		name:'Pagination',
		 props: {
		  pagesize: [Number, String],//一页多少条
		  currentpage: [Number, String],//当前页
		  total:[Number, String],//总页数
		  options: [Object],  // 分页发生变化赋值给options
		  render: [Function], // 跳转触发的请求
		  layout: {
			type: String,
			default: 'total, sizes, prev, pager, next, jumper'
		  }
		},
		setup(props,context) {
			// 分页导航
			const handlePageChange = (val)=>{
				props.options.page = val;
				props.render();
			}
			//切换分页条数
			const handleSizeChange = (val) =>{
				props.options.limit = val;
				props.render();
			}
			return{
				handlePageChange,
				handleSizeChange
			}
		}
	}
	 
</script>

<style>
</style>

第二步使用

<template>
	<v-pagination
	:pagesize="query.limit"
	:total="pageTotal"
	:options="query"
	:render="getData">
	</v-pagination>
</template>
<script>
import {ref,reactive,getCurrentInstance} from "vue";
import vPagination from '../../components/pagination.vue';
export default {
		components: {
			vPagination,
		},
		setup() {
			const { proxy } = getCurrentInstance(); //获取上下文实例
			const tableData = ref([]),//表格数据
				  pageTotal = ref(0),总条数
				  query = reactive({//配置对应的查询参数
				  		appTimeStart:'',
						appTimeEnd:'',
						page: 1,
						limit:10,//page第几页,limit是一页几个
					});
		 	// 获取表格数据
			const getData = () => {
				 proxy.$request({
				  url: 'api/getList',
				  method: 'POST',
				  data:query
				}).then(res => {
					pageTotal.value = res.count;
					tableData.value = res.data;
				})
			};
			getData();	
			return {
				query,
				shortcuts,
				tableData,
				pageTotal,
				getData
			};		
		}
}
</script>