VUE全家桶项目实战-- 8.组件分页区

一.Pagination 分页

<template>
 	<!--
		@size-change: 页面大小改变绑定的函数
		@current-change:页码更改绑定的函数
		:current-page:当前页码
		:page-size:页面大小
		:total: 总记录数
		layout:组件布局,显示的组件
	-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    ></el-pagination>
</template>
<script>
export default {
  name:'notification',
  data() {
    return {
        queryInfo:{
            //这里是整数型,不要用字符串
            pageNum:1,
            pageSize:10
        },
        total:0,
        list:[]
        
    }
  },
  create(){
      this.findList();
  },
  methods:{
      handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.findList();
    },
    handleCurrentChange(newCurrent) {
      this.queryInfo.pageNum = newCurrent;
      this.findList();
    },
    findList(){
        this.$http.post("/****/***",{}).then(res =>{
            const body = res.data;
            if(body.code ===0){
                this.list = body.list;
                this.total = body.total;
            }
                  
        }).catch(res=>{
            this.$message.error("查询异常")
        }) 
    }
  }

</script>