Vue + ElementUI 实现分页

官方文档 

Demo

HTML

        <template>
            <el-table :data="userList" border style="width:100%; margin: auto" stripe>
                <el-table-column prop="id" label="ID" width="" align="center"></el-table-column>
                <el-table-column prop="name" label="名字" width="" align="center"></el-table-column>
                <el-table-column prop="nick" label="昵称" width="" align="center"></el-table-column>
                <el-table-column prop="age" label="年龄" align="center"></el-table-column>
                <el-table-column prop="profession" label="职业" align="center"></el-table-column>
                <el-table-column prop="add_time" label="注册时间" align="center"></el-table-column>
                <!-- 操作 -->
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="del(scope.$index, scope.row)">删除</el-button>
                        <!-- <el-button size="mini" type="danger" @click="add(scope.$index, scope.row)">添加</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!-- 分页 -->
        <el-pagination background prev-text next-text 
            @size-change="changePageSize" @current-change="changePagenum"
            :current-page="pageInfo.pagenum" :page-sizes="pageInfo.pageSizes" :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
        </el-pagination>    

Vue

<script>

export default {
    name: "user",
    data() { 
        return {
            name: '用户列表-分页',
            // table 列表数据
            userList: [],
            
            // 获取用户列表的参数对象
            pageInfo: {
                page: 1,         // 当前的页数
                pageSize: 2,     // 当前每页显示多少条数据
                pageSizes: [1, 2, 5, 10, 20], //控制每页显示多少条
                total: 0,   // 总条数
            }, 
        }
    },
    methods:{ 
        // 改变当前第几页
        changePagenum(page) {
            console.log("当前" + page);
            this.pageInfo.page = page
            this.getList();
        },

        // 改变每页显示条数
        changePageSize(pageSize) {
            console.log("每页显示" + pageSize + "条");
            this.pageInfo.pageSize = pageSize
            this.getList();
        },

        getList() {
            this.$axios.get('user.list', {
                params: {
                    'page': this.pageInfo.page,
                    'pageSize': this.pageInfo.pageSize
                }
            }).then(response => (
                this.userList = response.data.data,
                this.pageInfo.total = response.data.total
            ))
        },
    },
    created() {
        this.getList();
    }
}
</script>
<style scoped>
#app{
    text-align: center;
}
</style>