分页组件自定义props
<template> <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :current-page="pageNum" :total="total" > </el-pagination> </template> <script> export default { name: "JPagination", props: { pageSize: { type: Number, default: 10, }, pageNum: { type: Number, default: 1, }, total: { type: Number, default: 1, }, pageSizes: { type: Array, default: () => [10, 20, 30, 40, 50], }, prop: { type: Object, default:{ pageSize: "pageSize", pageNum: "pageNum", }, }, }, data() { return {}; }, methods: { handleSizeChange(val) { this.$emit("handleQuery",this.prop['pageSize'],val); }, handleCurrentChange(val) { this.$emit("handleQuery", this.prop['pageNum'], val ); }, }, }; </script> <style></style>
使用方法
<JPagination2 :total="total" @handleQuery="handleQuery" :prop="{pageSize:'pageSize',pageNum:'page'}"/>