Element-UI 实现简单分页

首先，先创建简易的 table

<template>
    <div>
        <el-table :data="current_page_data">
            <el-table-column prop="id" label="ID">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            </el-table-column>
        </el-table>
        
    </div>
</template>

<script>
    export default {
        name: "dataList",
        data() {
            return {
                tableData:
                    [
                        {
                            'id': 1,
                            'name': '张三'
                        },
                        {
                            'id': 2,
                            'name': '李四'
                        },
                        {
                            'id': 3,
                            'name': '王二'
                        },
                    ],
            }
        },
    }
</script>

<style>
</style>

目前，作为案例的 table 搭建完毕。效果如下：

下一步，建立简单的分页组件

<template>
    <div>
        <el-table :data="tableData">
            <el-table-column prop="id" label="ID">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            </el-table-column>
        </el-table>

        <el-pagination background layout="total, sizes, prev,  pager, next, jumper">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "dataList",
        data() {
            return {
                tableData:
                    [
                        {
                            'id': 1,
                            'name': '张三'
                        },
                        {
                            'id': 2,
                            'name': '李四'
                        },
                        {
                            'id': 3,
                            'name': '王二'
                        },
                    ],
                current_page_data: [],
                current_page: 1,
            }
        },
    }
</script>

<style>
</style>

下一步，为分页组件添加对应的参数。

<template>
    <div>
        <el-table :data="tableData">
            <el-table-column prop="id" label="ID">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            </el-table-column>
        </el-table>

        <el-pagination background layout="total, sizes, prev,  pager, next, jumper"
                       :page-sizes="[1,2,3,4]" :total="tableData.length" :current-page.sync="current_page"
                       @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "dataList",
        data() {
            return {
                tableData:
                    [
                        {
                            'id': 1,
                            'name': '张三'
                        },
                        {
                            'id': 2,
                            'name': '李四'
                        },
                        {
                            'id': 3,
                            'name': '王二'
                        },
                    ],
                current_page_data: [],
                current_page: 1,
            }
        },
        methods: {
            handleSizeChange(val) {
                console.log(`当前每页${val}条`);
            },
            handleCurrentChange(val) {
                console.log(`当前处于${val}页`)
            }
        }
    }
</script>

<style>
</style>

目前分页组件点击页数后，便可以正常的读取当前页码。

最后一步，建立连接

• 把 tableData 改为 current_page_data。
• 在 handleCurrentChange 函数中对 tableData 切片，并赋值给 current_page_data

<template>
    <div>
        <el-table :data="current_page_data">
            <el-table-column prop="id" label="ID">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            </el-table-column>
        </el-table>

        <el-pagination background layout="total, sizes, prev,  pager, next, jumper"
                       :page-sizes="[1,2,3,4]" :total="tableData.length" :current-page.sync="current_page"
                       @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "dataList",
        data() {
            return {
                tableData:
                    [
                        {
                            'id': 1,
                            'name': '张三'
                        },
                        {
                            'id': 2,
                            'name': '李四'
                        },
                        {
                            'id': 3,
                            'name': '王二'
                        },
                    ],
                current_page_data: [],
                current_page: 1,
            }
        },
        methods: {
            handleSizeChange(val) {
                console.log(`当前每页${val}条`);
            },
            handleCurrentChange(val) {
                console.log(`当前处于${val}页`)
                console.log(this.current_page)
                console.log(this.tableData.slice(val - 1, val))

                this.current_page_data = this.tableData.slice(val - 1, val)
            }
        }
    }
</script>

<style>
</style>

注意：本文每页的数量限制为 1 个，console.log(this.tableData.slice(val - 1, val))使用了 val - 1，而不是变量，切换每页条数无效。若需切换每页条数，只需修改为对应变量即可。

实现分页后的版本

<template>
    <div>
        <el-table :data="current_page_data">
            <el-table-column prop="id" label="ID">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            </el-table-column>
        </el-table>

        <el-pagination background layout="total, sizes, prev,  pager, next, jumper"
                       :page-sizes="[1,2,3,4]" :page-size.sync="page_size"
                       :total="tableData.length" :current-page.sync="current_page"
                       @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "dataList",
        data() {
            return {
                tableData:
                    [
                        {
                            'id': 1,
                            'name': '张三'
                        },
                        {
                            'id': 2,
                            'name': '李四'
                        },
                        {
                            'id': 3,
                            'name': '王二'
                        },
                    ],
                current_page_data: [],
                current_page: 1,
                page_size: 1,
            }
        },
        methods: {
            handleSizeChange(val) {
                console.log(`当前每页${val}条`);
            },
            handleCurrentChange(val) {
                console.log(`当前处于${val}页`)
                console.log(this.current_page)

                var temp = (val - 1) * this.page_size;

                if (temp + this.page_size < this.tableData.length)
                    this.current_page_data = this.tableData.slice(temp, temp + this.page_size)
                else {
                    this.current_page_data = this.tableData.slice(temp, this.tableData.length)
                }

            }
        }
    }
</script>

<style>
</style>