基于elementUI的分页表格组件封装

在后台管理系统中，会经常大量的使用表格与分页，以下基于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>