数据分页显示

最新推荐文章于 2024-08-10 07:48:38 发布

～Serendipity～

最新推荐文章于 2024-08-10 07:48:38 发布

阅读量203

点赞数

文章标签： elementui

本文链接：https://blog.csdn.net/ZMJ_QQ/article/details/120659980

版权

前端页面分页



<body>
    <div id="app">
        <!-- tableData.slice((当前页数 - 1) * 每页条数, 当前页数*当前条数) -->
        <!-- tableData.slice((page -1) * limit , limit * page) -->
        <el-table :data="tableData.slice((page -1) * limit , limit * page)" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="title" label="标题" width="180"></el-table-column>
            <el-table-column prop="body" label="内容"></el-table-column>
        </el-table>
        <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :page-size="limit"
            :current-page="page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                tableData: [],
                total: 10,
                limit: 10,
                page: 1
            },
            created() {
                axios.get('http://jsonplaceholder.typicode.com/posts')
                .then(res => {
                    console.log(res)
                    this.tableData = [...res.data]
                    this.total = res.data.length
                })
            },
            methods: {
                handleSizeChange(val) {
                    // console.log(val)
                    this.limit = val
                    this.page = 1
                },
                handleCurrentChange(val) {
                    // console.log(val)
                    this.page = val
                }
            }
        })
    </script>
</body>

后端分页显示

<body>
    <div id="app">
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="title" label="标题" width="180"></el-table-column>
            <el-table-column prop="body" label="内容"></el-table-column>
        </el-table>
        <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :page-size="limit"
            :current-page="page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                tableData: [],
                total: 10,
                limit: 10,
                page: 1
            },
            created() {
                axios.get('http://jsonplaceholder.typicode.com/posts')
                .then(res => {
                    console.log(res)
                    this.tableData = [...res.data]
                    this.total = res.data.length
                })
            },
            methods: {
                getData(obj) {
                    axios.get('http://jsonplaceholder.typicode.com/posts', {params: obj})
                    .then(res => {
                        this.tableData = [...res.data]
                    })
                },  
                handleSizeChange(val) {
                    this.limit = val
                    this.page = 1
                    this.getData({_page: this.page, _limit: val})
                },
                handleCurrentChange(val) {
                    this.page = val
                    this.getData({_page: val, _limit: this.limit})
                }
            }
        })
    </script>
</body>