标签：ElementPlus const String val Vue3 query props 封装 options

第一步新建公共组件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>

标签：ElementPlus,const,String,val,Vue3,query,props,封装,options
来源： https://blog.csdn.net/qq_28948031/article/details/119320264

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。