vue中以Element写一个分页组件

组件代码

<template>
  <div class="page">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  props: ['total'],
  methods: {
    // 分页
    handleSizeChange (val) {
      console.log(`每页${val}条`)
      let pageSize = val
      this.$emit('getInitList', pageSize)
    },
    handleCurrentChange (val) {
      console.log(`当前页${val}`)
      let pageNum = val
      this.$emit('getInitList', '', pageNum)
    }
  }
}
</script>

<style lang="scss" scoped>
.page{
    padding: 5px 0;
    background-color: #D3DCE6;
  }
</style>

别的组件引入

//印射组件
<LoadMore @getInitList="getBugList" :total = total></LoadMore>
//分页组件引入
import LoadMore from '@/views/common/LoadMore.vue'


// 获取数据的初始化
    getBugList (ps, pn) {
      let self = this
      if (ps) {
        self.pageSize = ps
      }
      if (pn) {
        self.pageNum = pn
      }
      if (!self.form.issueStatus || self.form.issueStatus == -1) {
        self.form.issueStatus = null
      }
      let query = { issueTargetId: self.componentId, issueTitle: self.form.issueTitle, issueProposerName: self.form.issueProposerName, issueStatus: self.form.issueStatus, pageNo: self.pageNum, pageSize: self.pageSize }
      this.axios
        .post(self.publicPath + '/issue/getIssueList', query)
        .then((res) => {
          if (res.data.code == 1) {
            self.bugerDatas = res.data.data.list
            self.total = res.data.data.count
          } else {
            self.$message.error(res.data.msg == null ? '初始化问题单列表失败!' : res.data.msg)
          }
          self.bugerTableLoading = false
        }).catch((error) => {
          console.log(error)
        })
    }