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:{