封装分页功能

  <template>
      <div
        :class="{'hidden':hidden}"
        class="pagination-container"
      >
        <el-pagination
          :background="background"
          :current-page.sync="currentPage"
          :page-size.sync="pageSize"
          :layout="layout"
          :page-sizes="pageSizes"
          :total="total"
          v-bind="$attrs"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </template>

        <script>
        import { scrollTo } from '@/utils/scroll-to'

        export default {
          name: 'Pagination',
          props: {
            total: {
              required: true,
              type: Number
            },
            page: {
              type: Number,
              default: 1
            },
            limit: {
              type: Number,
              default: 20
            },
            pageSizes: {
              type: Array,
              default () {
                return [10, 20, 30, 50]
              }
            },
            layout: {
              type: String,
              default: 'total, sizes, prev, pager, next, jumper'
            },
            background: {
              type: Boolean,
              default: true
            },
            autoScroll: {
              type: Boolean,
              default: true
            },
            hidden: {
              type: Boolean,
              default: false
            }
          },
          computed: {
            currentPage: {
              get () {
                return this.page
              },
              set (val) {
                this.$emit('update:page', val)
              }
            },
            pageSize: {
              get () {
                return this.limit
              },
              set (val) {
                this.$emit('update:limit', val)
              }
            }
          },
          methods: {
            handleSizeChange (val) {
              this.$emit('pagination', { page: this.currentPage, limit: val })
              if (this.autoScroll) {
                scrollTo(0, 800)
              }
            },
            handleCurrentChange (val) {
              this.$emit('pagination', { page: val, limit: this.pageSize })
              if (this.autoScroll) {
                scrollTo(0, 800)
              }
            }
          }
        }
        </script>

        <style scoped>
        .pagination-container {
          /* background: #fff; */
          padding: 32px 16px;
        }
        .pagination-container.hidden {
          display: none;
        }
        </style>

使用分页

  <pagination
  v-show="total > 0"
  :total="total"
  :page.sync="queryParams.pageNum"
  :limit.sync="queryParams.pageSize"
  @pagination="getList"
/>

    // 取消按钮
        cancel() {
          this.open = false;
          this.reset();
        },
        // 表单重置
        reset() {
          this.form = {
            taskid: undefined,
            tasktitle: undefined,
            tasktype: undefined,
            tasktypename: undefined,
            startdate: undefined,
            enddate: undefined,
            creator: undefined,
            createtime: undefined,
            companyid: undefined,
            companyname: undefined,
            platformid: undefined,
            description: undefined,
            coursewareid: undefined,
            coursewaretitle: undefined,
            paperid: undefined,
            papertitle: undefined,
            starttime: undefined,
            endtime: undefined,
            employeeids: undefined,
            employeenames: undefined,
            drillid: undefined,
            drillname: undefined,
            imagename: undefined,
            imageurl: undefined,
            videoname: undefined,
            videourl: undefined,
          };
          this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.resetForm("queryForm");
          this.handleQuery();
        },
      },
    };