Vue+Element分页组件

<!--components下封装一个分页组件：PageCard.vue-->
<template>
  <div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="Number(pageData.currentPage)"
      :page-size="Number(pageData.pageSize)"
      :total="Number(pageData.total)"
      :page-sizes="pageSizes"
      background
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    pageData: {
      type: Object,
    }
  },
  data(){
    return{
      pageSizes: [10, 20, 30, 40]
    }
  },
  methods: {
    handleSizeChange(val){
      this.$emit("pagination", {
        currentPage: "",
        pageSize: val,
      })
    },
    handleCurrentChange(val){
      this.$emit("pagination", {
        currentPage: val,
        pageSize: "",
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-pagination{
  margin-top: 25px;
  margin-bottom: 15px;
  text-align: right;
}
</style>




使用：

<PageCard :pageData="pageData" @pagination="pagination"></PageCard>

methods:{
	pagination(val){
            		if(val.currentPage===""){
                		this.pageData.pageSize = val.pageSize
                		this.queryMaterialFileData()//分页查询对应请求
            		}else{
                		this.pageData.currentPage = val.currentPage
                		this.queryMaterialFileData()//分页查询对应请求
            		}
        	},
}

data() {
           pageData: {
                currentPage: 1,
                pageSize: 10,
                total: 0
            },
}

async queryPage() {//分页查询请求
            const res = await queryPage({
                pageSize:this.pageData.pageSize,
                currentPage:this.pageData.currentPage,
            })
            this.tableData = res.redata.list
            this.pageData.total = res.redata.total
}