分页组件自定义props

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

<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>

　　使用方法

?

1	<JPagination2 :total="total" @handleQuery="handleQuery" :prop="{pageSize:'pageSize',pageNum:'page'}"/>