vue+elementUI项目封装分页组件

src/components/pagination

<template>
<!--分页-->
<el-col :span="24" class="toolbar" :data-total="total" :data-size="pageSize" :data-pageSizes="pageSizes">
    <el-pagination
		layout="total, sizes, prev, pager, next, jumper"
		@size-change="handleSizeChange"
		@current-change="handleCurrentChange"
		:current-page="currentPage"
		:page-size="pageSize"
		:page-sizes="pageSizes"
		:total="total"
		class="pagination" >
    </el-pagination>
</el-col>
</template>
<script>
    export default {
        data() {
            return {

            }
        },
        props: {
            total: {
                default: 0
            },
            pageSize: {
                default: 10
            },
            currentPage: {
                default: 1
            },
            pageSizes: {
                default: function() {
                    return [5, 10, 20, 30, 40, 50, 100]
                }
            }
        },
        methods: {
            handleSizeChange(val) {
                this.$emit("loadData", this.currentPage, val);
            },
            handleCurrentChange(val) {
                this.$emit("loadData", val, this.pageSize);
            },
        }
    }
</script>
<style scoped lang="scss">
    .toolbar {
        text-align: center
    }

    .pagination {
        /deep/ .el-pager li,
        /deep/ button {
            background: none;
        }
    }
</style>

使用分页页面

<template>
  <div class="wrap">
    <el-row class = 'expPage'>
      <el-col :span="24" class="common-block">
        <el-row>
          <el-col :span="24">
            <el-form :inline="true" :model="filterData" ref="filterForm">
              <el-form-item label="会员编码：">
                <el-input v-model="filterData.userId" placeholder="会员编码">
                </el-input>
              </el-form-item>
              <el-form-item label="手机号码：">
                <el-input v-model="filterData.phone" placeholder="手机号码">
                </el-input>
              </el-form-item>
              <el-form-item label="券批次：">
                <el-input v-model="filterData.batchId" placeholder="券批次">
                </el-input>
              </el-form-item>
              <el-form-item label="选择膨胀时间：">
                <el-date-picker
                  v-model="filterData.time"
                  placeholder="请选择"
                  type="daterange"
                  :clearable='false'
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptions"
                  :default-time="defaultTime"
                >
                </el-date-picker>
              </el-form-item>
              <!-- <el-form-item label="膨胀状态：">
                <el-select v-model="filterData.status" placeholder="请选择">
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item> -->
              <el-form-item>
                <el-button type="primary" @click="queryList">查询</el-button>
                <el-button type="primary" @click="onReset">重置</el-button>
                <el-button
                :disabled="exportDisabled"
                type="primary" @click="exportExcel">导出</el-button>
              </el-form-item>
            </el-form> 
          </el-col>
        </el-row>
        <el-table :data="list" v-loading="listLoading" class="freight-tab">

          <el-table-column
            prop="memberCode"
            label="会员编号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="memberPhone"
            label="手机号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="batchId"
            label="膨胀券批次"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="dilateStartTime"
            label="膨胀开始时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="dilateEndTime"
            label="膨胀到期时间"
            align="center"
          ></el-table-column>
        </el-table>
        <pagination
          :total="paginationData.total"
          :pageSize="paginationData.pageSize"
          :currentPage="paginationData.pageNo"
          @loadData="getPageListData"
        ></pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
let lodash = require('lodash')
import pagination from "@/components/pagination/pagination";
import moment from "moment";
import {api,download} from '@/assets/js/util'
import { cityServiceRouter } from '../../router/modules';
import request from '@/assets/js/request'
import { validateEmpty } from "@/assets/js/validate";

function generateDefaultFilterData() {
  return {
    // orderCode: "",
    userId: "",
    phone: "",
    batchId: "",
    time: [
      moment().format("YYYY-MM-DD 00:00:00"),
      moment().format("YYYY-MM-DD HH:mm:ss")
    ],
    // status: ""
  }
}
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() > new Date().getTime() + 60 * 60 * 24 * 1000;
        }
      },
      defaultTime: ["00:00:00", "23:59:59"],
      list: [],
      filterData: generateDefaultFilterData(),
      statusOptions: [
        { text: "全部", value: "" },
        { text: "未过期未使用", value: 0 },
        { text: "已过期未使用", value: 2 },
        { text: "已使用", value: 1 }
      ],
      listLoading: false,
      paginationData: {
        total: 0,
        pageSize: 10,
        pageNo: 1
      },
      exportDisabled: false,
    };
  },
  components: {
    pagination
  },
  methods: {
    queryList() {
      const reqData = this.getQueryListRequestData();
      this.getList(reqData);
    },
    async getList(reqData) {
      if (this.listLoading) { return false };
      this.setListLoading(true);
      try {
        const result = await this.fetchListData(reqData);
        this.dealListSuccess(result);
      } catch(e) {
        this.clearList();
        this.setListLoading(false);
      }
    },
    dealListSuccess(result) {
      this.setListLoading(false);
      const { data } = result;
      const { list, total } = data;
      let { paginationData } = this;
      this.paginationData = { ...paginationData, total };
      this.list = list;
    },
    getPageListData(pageNo, pageSize) {
      const pageData = { pageSize, pageNo };
      const reqData = this.getQueryListRequestData(pageData);
      this.getList(reqData)
    },
    formatStatus(row, column, cellValue, index) {
      const { statusOptions } = this;
      const targetOptions = statusOptions.filter(item => {
        return item.value === cellValue;
      });
      if (targetOptions.length > 0) {
        return targetOptions[0].text;
      } else {
        return "";
      }
    },
    setListLoading(status) {
      this.listLoading = status;
    },
    getFilterDataForRequest() {
      const { filterData } = this;
      const { orderCode, userId, phone, time, status, batchId } = filterData;
      const [dilateStartTime, dilateEndTime] = time;
      return {
        dilateStartTime,
        dilateEndTime,
        // orderCode,
        batchId,
        // orderStatus: status,
        memberCode: userId,
        memberPhone: phone
      }
    },
    getQueryListRequestData(paginationData = this.paginationData) {
      const { pageSize, pageNo } = paginationData;
      const filterRequestData = this.getFilterDataForRequest();
      return {
        pageSize,
        page: pageNo,
        ...filterRequestData
      }
    },
    fetchListData(reqData) {
      return api('/weapp/volume/activity/user/coupon/list', reqData, 'post');
    },
    clearList() {
      this.list = [];
    },
    navigateToRead({ id, activityCode }) {
      this.$router.push({ path: `/couponBuying/read/${activityCode}`, query: { type: 'code' } });
    },
    onReset() {
      const data = generateDefaultFilterData();
      this.filterData = data;
    },

    //   tapToSearch: lodash.debounce(function (event) {
    //     event.preventDefault();
    //   }, 300)

    exportExcel: lodash.debounce(function (event) {
      event.preventDefault();
      const config = this.getFilterDataForRequest();
      if (!validateEmpty(config)) {
        this.$message.warning('导出日期不能为空');
        return false
      }
    //   let between = moment(this.filterData.time[1]) - moment(this.filterData.time[0])
    //   if(between/86400000 > 1) {
    //     return this.$message.warning('导出日期间隔不能大于1天');
    //   }
    //   this.exportDisabled = true;
    //   var params = Object.keys(config).map(function (key) {
    //     return encodeURIComponent(key) + "=" + encodeURIComponent(config[key]);
    //   }).join("&");
    //   api(`/weapp/volume/activity/user/coupon/export?${params}`, '', "post", "blob","application/x-www-form-urlencoded;charset=utf-8").then(  
    //     res => {
    //       this.exportDisabled = false;
    //       download(res);
    //     },
    //     () => {
    //       this.exportDisabled = false;
    //     }
    //   );

      this.exportExpRecordList(config)
    },300),
     exportExpRecordList (data)  {
      request({
        url: '/volume/activity/user/coupon/export',
        method: 'post',
        timeout: null,
        responseType: 'blob',
        data
      })
    
    },   
  },
  created() {
    this.queryList();
  }
};
</script>

<style lang="scss" scoped>
.expPage .el-input {
        width: 150px !important;
    }
.row-label {
  display: inline-block;
  font-size: 14px;
  color: #333;
}
/deep/ .activity-code {
  user-select:all;
  span {
    white-space: break-spaces;
    user-select: all;
  }
}
</style>