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)
        })
    }