Element-UI之el-pagination

887 阅读1分钟
<el-pagination			
@size-change="handleSizeChange"  <!--改变选择一页能够显示多少条数据 -->
@current-change="handleCurrentChange" <!--处理当前页数-->
:current-page="queryInfo.pagenum"
:page-sizes="[1,2,3,4,5]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper" :total="total" >
 </el-pagination>
    export default {
        data() {
            return {
                queryInfo: {
                    query: "",
                    // 当前的页数
                    pagenum: 1,
                    pagesize: 2
                },
                userList: [],
                total: 0,
                value: false,
            }
        },
        created() {
            this.getUserList();
        },
        methods: {
            async getUserList() {
                const { data: res } = await this.$http.get("users", { params: this.queryInfo });
                if (res.meta.status !== 200) {
                    return this.$message.error("数据获取失败");
                }
                this.userList = res.data.users;
                this.total = res.data.total;
                console.log(this.userList);
            },
            // 监听pageSizeChange
            handleSizeChange(newSize) {
                this.queryInfo.pagesize = newSize;
                this.getUserList();
            },
            // 监听页码值改变的事件
            handleCurrentChange(newPage) {
                console.log(newPage);
                this.queryInfo.pagenum = newPage;
                this.getUserList();
            }

        }
    }