关于使用element分页的问题

Question

设置了每页显示3条但依然是每页显示4条

<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
            <el-row :gutter="20">
                <el-col :span="7">
                    <el-input placeholder="请输入内容">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary">添加用户</el-button>
                </el-col>
            </el-row>

            <el-table :data="userList" border stripe>
                <el-table-column label="#" type="index" align="center"></el-table-column>
                <el-table-column label="姓名" prop="username" align="center"></el-table-column>
                <el-table-column label="邮箱" prop="email" align="center"></el-table-column>
                <el-table-column label="电话" prop="phone" align="center"></el-table-column>
                <el-table-column label="角色" prop="role_name" align="center"></el-table-column>
                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.mg_state"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="180px">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
                        <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
                            <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="queryInfo.pageNum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            queryInfo:{
                pageNum:1,
                pageSize:2
            },
            userList: [],
            total:0

        }
    },
    created() {
        this.getUserList()
    },
    methods: {
        getUserList() {
            this.userList = [
                {
                    username: 'admin',
                    email: '[e-mail]',
                    phone: '1232112',
                    role_name: '超级管理员',
                    mg_state: true
                },
                {
                    username: 'leihen',
                    email: '[e-mail]',
                    phone: '57123290',
                    role_name: '超级管理员',
                    mg_state: false
                },
                {
                    username: 'huwu',
                    email: '[e-mail]',
                    phone: '69332',
                    role_name: '超级管理员',
                    mg_state: false
                },
                {
                    username: 'machao',
                    email: '[e-mail]',
                    phone: '1694332',
                    role_name: '超级管理员',
                    mg_state: true
                }
            ]
            this.total = this.userList.length
        },
        handleSizeChange(newSize){
            console.log(newSize);
            this.queryInfo.pageSize = newSize
            this.getUserList()
        },
        handleCurrentChange(newPage){
            this.queryInfo.pageNum = newPage
            this.getUserList()
        }
    }
}
</script>

<style lang="less" scoped>
</style>

Answer 1

<el-table :data="userList.slice((queryInfo.pageNum-1)*pagesize,queryInfo.pageNum*queryInfo.pageSize)" border stripe>