element-ui 分页器 el-pagination 组件再封装

html

<el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      @current-change="handleSizeClick"
      :current-page="pagenum"
      hide-on-single-page
    >
    </el-pagination>

js

 // 分页器接收的传入值
  props: ['total', 'pageSize', 'pagenum'],
  methods: {
    handleSizeClick(newPage) {
      //   console.log(this.pagenum)
      this.$emit('paginationChange', newPage)
    },
  },

父组件接收

<user-pagination
      class="user-pagination"
      :total="querInfo.total"
      :pageSize="querInfo.pageSize"
      :pagenum="querInfo.pagenum"
      @paginationChange="paginationChange2"
    ></user-pagination>

父组件data

 // 分页器的元素
      querInfo: {
        total: 0,
        pagenum: 1,
        pageSize: 10,
        query: '',
      },

父组件js

//   分页器改变
    paginationChange2(newPage) {
      this.querInfo.pagenum = newPage
      //调用新的列
      this.getcertificationList()
    },

当分页器的页数改变时，传事件给父组件，父组件调用方法更新列