在后台管理系统中，会经常大量的使用表格与分页，以下基于elementUI实现一个简单的table与pagination的封装
这里在pageSize发生变化的时候，会令currentPage为1，即表格跳转到第一页，这里这么做的目的在于：例如当前页为10，当修改pageSize后，由于每页数据量变大，此时最大页数如果小于10，那么会再次触发current-change事件的发生，对到项目中，一般是会进行两次请求，因此这里直接跳转到第一页，那么由于是第1页，就不会触发current-change事件的发生，也就避免了两次请求的问题
pageTable.vue
<template> <div> <el-table ref="table" element-loading-text="Loading" :data="tableData" tooltip-effect="dark" style="width:100%"> <el-table-column v-if="showSelection" type="selection" width="55" align="center" ></el-table-column> <el-table-column v-for="(item,index) in tableLabel" :width="item.width ? item.width : ''" :key="index" :align="item.align ? item.align : 'center'" :label="item.label" :prop="item.param" > <template slot-scope="scope"> <span v-if="item.render" style="color:#606266"> {{item.render(scope.row)}} </span> <span v-else style="color:#606266">{{scope.row[item.param]}}</span> </template> </el-table-column> <el-table-column v-if="tableOption.label" :width="tableOption.width ? tableOption.width : ''" :label="tableOption.label" align="center" class-name="fixed-width" > <template slot-scope="scope"> <el-button v-for="(item,index) in tableOption.options" :key="index" :type="item.type ? item.type : 'text'" :icon="item.icon ? item.icon : ''" @click="handleButton(item.methods,scope.row)" size="small" > {{item.label}} </el-button> </template> </el-table-column> </el-table> <el-pagination style="text-align: right;" :page-sizes="[5, 10, 15, 20]" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pager.currentPage" :page-size.sync="pager.pageSize" :hide-on-single-page="true" layout="total, prev, pager, next, sizes" :total="pager.total" ></el-pagination> </div> </template> <script> export default { data(){ return { } }, props:{ tableData:{ // 表格数据 type:Array, default: () => { return [] } }, tableLabel:{ // label信息 type:Array, default: () => { return [] } }, tableOption:{ // 操作数据 type:Object, default: () => { return {} } }, showSelection:{ // 是否显示复选框 type: Boolean, default: false }, pager:{ // 分页信息 type: Object, default: function(){ return { currentPage:1, pageSize:10, total:0 } } } }, methods: { // 触发自定义按钮操作 handleButton(method, row){ this.$emit('handleButton', method, row); }, // 获取所有的复选框选项 getAllSelections(){ return this.$refs.table.selection; }, // size发生变化时，令currentPgae为1，并发送自定义事件 handleSizeChange(val) { this.pager.currentPage = 1; this.$emit('pagination', val); }, // currentPage发生变化时，发送自定义事件 handleCurrentChange(val) { this.$emit('pagination', val); } } } </script> 组件引用 <PageTable :tableData="tableData" :tableLabel="tableLabel" :tableOption="tableOption" :pager="pager" @pagination="loadTable" @handleButton="tableBtnHandle(arguments)" ></PageTable> <script> export default{ data(){ tableData:[], // table数据 tableLabel:[ {label:'关联类型', param:'type'}, {label:'本端资产', param:'name'}, {label:'本端接口', param:'inf'}, {label:'对端资产', param:'peerName'}, {label:'对端接口', param:'peerINF'} ], // tableLabel数据 tableOption: { label: '操作', options: [ { label: '编辑', methods: 'editDetail' }, { label: '删除', methods: 'detailDetail' } ] }, pager:{ pageSize: 10, // 每页数据量 currentPage: 1, // 分页 当前页 total:0, //列表总数 } } } </script>