Vue 饿了么 分页组件 小笔记

    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page"
              :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

size-change pageSize 改变时会触发事件
current-change currentPage 改变时会触发
page-size 每页显示条目个数
page-sizes 每页显示个数选择器的选项设置
layout=”total, sizes, prev, pager, next, jumper” 组件布局，子组件名用逗号分隔
total 总条目数

        let start = (this.listQuery.page - 1) * this.listQuery.limit; //开始计算从哪里开始
        let end = this.listQuery.page * this.listQuery.limit; //结束
        let pageList = this.contractlist.slice(start, end); //数组截取
        this.pageData = pageList; //数据源赋值