vue项目实现分页，导出excel表格功能

<template>
  <div :class="{'hidden': hidden}" class="pagination-container">
    <Pagination
      :background="background"
      :current-page.sync="limiNum"
      :layout="layout"
      :total="total"
      :page-size="limit"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
      <span class="pageSizeInput">
        <Input v-model.trim.number="pageSize" @blur="handlePageSize" />
      </span>
    </Pagination>
    <span v-if="!unshowExcl" class="excle">
      <span>导出excel文件:</span>
      <img src="../../assets/excel.gif" @click="getdata()">
    </span>
  </div>
</template>

<script>
import { Pagination, Input } from 'element-ui'
export default {
  name: 'Paginations',
  components: { Pagination, Input },
  props: {
    total: { // total: 一共有数据量
      required: true,
      type: Number
    },
    limit: {
      type: Number,
      default: 10
    },
    page: {
      type: Number,
      default: 1
    },
    layout: {
      type: String,
      default: 'total, slot, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: true
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    list: { // list: 导出excel数据源
      type: Array,
      required: false
    },
    thHeader: { // thHeader:表头数组
      type: Array,
      required: false
    },
    filters: { // filters: 参数数组
      type: Array,
      required: false
    },
    current: { // currentPage: 页码
      type: Number,
      default: 1,
      required: false
    },
    unshowExcl: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      limiNum: 1,
      pageSize: 10
    }
  },
  watch: {
    'page': function(val) {
      if (val) {
        this.limiNum = val
      }
    },
    'current': function(val) {
      if (val) {
        this.limiNum = val
      }
    },
    'limit': function(val) {
      if (val) {
        this.pageSize = val
      }
    }
  },
  created: function() {
    this.pageSize = this.limit
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('pagination', { limit: val })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
    handleCurrentChange(val) {
      this.limiNum = val
      this.$emit('newCurrent', val)
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
    handlePageSize(val) {
      if (!this.pageSize) {
        this.$message({
          message:
              `请输入正确的每页显示数量`,
          type: 'error'
        })
        return
      }
      this.limiNum = 1
      this.$emit('pagination', { limit: this.pageSize })
      // if(!this.pageSize) {
      //   this.$emit('pagination', { limit: val })
      // }
    },
    getdata() {
      if (this.list.length) {
                import('@/commom/Excel').then(excel => {
                  const tHeader = this.thHeader
                  const filterVal = this.filters
                  const list = this.list
                  const data = this.formatJson(filterVal, list)
                  excel.export_json_to_excel({
                    header: tHeader,
                    data,
                    filName: this.filename
                  })
                })
      } else {
        this.$message({
          message:
                  `请选择要导出的数据！`,
          type: 'error'
        })
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  }
}

</script>

<style scoped lang='scss'>
.pagination-container {
    background: #fff;
    padding: 32px 16px;
    display: flex;
    justify-content: space-around;
    .hidden {
        display: none;
    }
    .excle {
        display: flex;
        align-items: center;
        font-weight: 400;
        color: #606266;
        font-size: 14px;
        img {
          margin-left: 10px;
          cursor: pointer;
        }
    }
}
</style>

然后引入组件

import Paginations from '@/components/Pagination/index'

在需要的地方使用组件

<!-- 分页 -->
        <div class="block">
          <Paginations
            :list="iSlist"
            :th-header="thHeader"
            :filters="filterVal"
            :total="total"
            :page.sync="ruleform.pageNo"
            :limit="ruleform.pageSize"
            @pagination="query"
            @newCurrent="newCurrent"
          />
        </div>

// 接收页码

newCurrent(val) {
      this.ruleform.current = val
      this.query()
    },

效果图：

点击导出可以实现导出excel的功能：

希望对大家有所帮助，谢谢