40、使用elementUI分别实现前端，后端表格分页

说明：前端单独做的表格分页—用于解决数据过多页面渲染压力，如果是服务器响应数据过慢，使用第二种分页方法–后端分页。以下为分页效果

一、前端分页

1、创建表格

<el-table
            :key="new Date().getTime()"
            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            row-key="id"
            ref="table"
            style="width: 100%"
        >

            <template v-for="(item, idx) in tableHead">
                <el-table-column
                    :key="item.key"
                    :prop="item.value"
                    :label="item.name"
                    align="center"
                >
                </el-table-column>
            </template>
        </el-table>

说明：slice(a,b)的作用是从已有的数组中返回选定的元素"a"表示开始，"b"表示结束。 而currentPage和pageSize在此网页的作用会在接下来进行说明。

2、创建分页

<el-pagination align='center' 
   @size-change="handleSizeChange" 
   @current-change="handleCurrentChange"
   :current-page="currentPage" 
   :page-sizes="[1,5,10,20]" 
   :page-size="pageSize" 
   layout="total, sizes, prev, pager, next, jumper" 
   :total="tableData.length">
</el-pagination>

文章来源地址https://www.toymoban.com/news/detail-528001.html

说明分页器绑定变量说明：

:current-page的值表示当前是第几页；

:page-sizes的值表示可以选择一页多少条；

:page-size的值表示当前一页显示几条；

layout的值表示分页需要显示的内容，例如“total” 表示总数、“next” 表示下一页等；

:total的值表示共多少条数据；

根据变量pageSize值，以及当前页变量currentPage，在界面上会自动把分的页显示出来，如上图中的：1、2、3……6…。

3、在data中定义变量

data() {
            return {
                tableData: [],
                tableHead: [
                    {name: "母线名称", value: 'busName',  },
                    {name: "电压等级", value: 'voltageLevel',  },
                    {name: "开始时间", value: 'startDate', },
                    {name: "恢复时间", value: 'recoverDate',  },
                    {name: "持续时间(分钟)", value: 'continuedDate', },
                    {name: "越限类型", value: 'limitType',  },
                    {name: "越限极值", value: 'limitValue',  },
                ],
                currentPage: 1, // 当前页码
                total: 20, // 总条数
                pageSize: 2, // 每页的数据条数
            };
        },

4、 添加事件

methods: {
     //每页条数改变时触发 选择一页显示多少行
     handleSizeChange(val) {
         console.log(`每页 ${val} 条`);
         this.currentPage = 1;
         this.pageSize = val;
     },
     //当前页改变时触发 跳转其他页
     handleCurrentChange(val) {
         console.log(`当前页: ${val}`);
         this.currentPage = val;
     }
}

5、完整前端分页代码展示

<template>
    <div class="v-table" ref="tableheight" style="width: 100%; height: 100%">
        <el-table
            :key="new Date().getTime()"
            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            row-key="id"
            ref="table"
            style="width: 100%;height: calc(100% - 60px)"
        >

            <template v-for="(item, idx) in tableHead">
                <el-table-column
                    :key="item.key"
                    :prop="item.value"
                    :label="item.name"
                    align="center"
                >
                </el-table-column>
            </template>
        </el-table>
        <!-- 分页器 -->
        <div class="block-box">
            <el-pagination align='center'
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="[1,5,10,20]"
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="tableData.length">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [
                    {
                        busName:"xxx",
                        voltageLevel:"",
                        startDate:"",
                        recoverDate:"",
                        continuedDate:"",
                        limitType:"",
                        limitValue:"",  
                    },{
                        busName:"xxx",
                        voltageLevel:"",
                        startDate:"",
                        recoverDate:"",
                        continuedDate:"",
                        limitType:"",
                        limitValue:"",  
                    },{
                        busName:"xxx",
                        voltageLevel:"",
                        startDate:"",
                        recoverDate:"",
                        continuedDate:"",
                        limitType:"",
                        limitValue:"",  
                    },{
                        busName:"xxx",
                        voltageLevel:"",
                        startDate:"",
                        recoverDate:"",
                        continuedDate:"",
                        limitType:"",
                        limitValue:"",  
                    },{
                        busName:"xxx",
                        voltageLevel:"",
                        startDate:"",
                        recoverDate:"",
                        continuedDate:"",
                        limitType:"",
                        limitValue:"",  
                    },{
                        busName:"xxx",
                        voltageLevel:"",
                        startDate:"",
                        recoverDate:"",
                        continuedDate:"",
                        limitType:"",
                        limitValue:"",  
                    },{
                        busName:"xxx",
                        voltageLevel:"",
                        startDate:"",
                        recoverDate:"",
                        continuedDate:"",
                        limitType:"",
                        limitValue:"",  
                    },
                ],
                tableHead: [
                    {name: "母线名称", value: 'busName',  },
                    {name: "电压等级", value: 'voltageLevel',  },
                    {name: "开始时间", value: 'startDate', },
                    {name: "恢复时间", value: 'recoverDate',  },
                    {name: "持续时间(分钟)", value: 'continuedDate', },
                    {name: "越限类型", value: 'limitType',  },
                    {name: "越限极值", value: 'limitValue',  },
                ],
                currentPage: 1, // 当前页码
                total: 20, // 总条数
                pageSize: 2, // 每页的数据条数
            };
        },
        mounted() {
        },
        methods: {
            // 表格分页---前端分页
            //每页条数改变时触发 选择一页显示多少行
            handleSizeChange(val) {
                this.currentPage = 1;
                this.pageSize = val;
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                this.currentPage = val;
            },

        }
    };
</script>

<style lang="less">
    .v-table {
        //分页样式
        .block-box{
            width: 100%;
            height: 50px;
            margin-top: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
</style>

二、后端分页

后端分页就是，根据前端所给后端传的两个参数处理判断响应数据，第一参数：每一页多少条数据pageSize，第二个参数：当前所选中的页码currenPage，进行

说明：表格模板代码以及分页器代码创建步骤同上，唯一不同就是总表格数据条数:total不就是后端响应的表格数据长度，需要后端另外返回表格数据总数;否则分页器只显示第1页。

1、js代码

methods: {
     //表格分页操作
            //每页条数改变时触发 选择一页显示多少行
            handleSizeChange(val){
                this.pageSize = val;
                this.params = {
                    pageSize:this.pageSize,
                    currentPage:this.currentPage,
                }
                this.getDialogData(val,this.currentPage,this.dialogTableUrl, this.params);
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val){
                this.currentPage = val;
                this.params = {
                    pageSize:this.pageSize,
                    currentPage:this.currentPage,
                }
                this.getDialogData(this.pageSize,val,this.dialogTableUrl, this.params);
            },
            getDialogData(pageSize,currentPage,url, params) {
                getRequestData(url, 'get', params).then((res) => {
                    if (res.status == 200){
                        let data = res.data.data;
                        this.total = data.num;//总数据条数
                        this.tableData = data.list
                    }
                })
            },
}

3.完整后端分页代码

<template>
    <div class="v-table" ref="tableheight" style="width: 100%; height: 100%">
        <el-table
            :key="new Date().getTime()"
            :data="tableData"
            row-key="id"
            ref="table"
            style="width: 100%;height: calc(100% - 60px)"
        >

            <template v-for="(item, idx) in tableHead">
                <el-table-column
                    :key="item.key"
                    :prop="item.value"
                    :label="item.name"
                    align="center"
                >
                </el-table-column>
            </template>
        </el-table>
        <!-- 分页器 -->
        <div class="block-box">
            <el-pagination align='center'
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="[1,5,10,20]"
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [
                    {
                        busName:"xxx",
                        voltageLevel:"",
                        startDate:"",
                        recoverDate:"",
                        continuedDate:"",
                        limitType:"",
                        limitValue:"",  
                    },{
                        busName:"xxx",
                        voltageLevel:"",
                        startDate:"",
                        recoverDate:"",
                        continuedDate:"",
                        limitType:"",
                        limitValue:"",  
                    },{
                        busName:"xxx",
                        voltageLevel:"",
                        startDate:"",
                        recoverDate:"",
                        continuedDate:"",
                        limitType:"",
                        limitValue:"",  
                    },{
                        busName:"xxx",
                        voltageLevel:"",
                        startDate:"",
                        recoverDate:"",
                        continuedDate:"",
                        limitType:"",
                        limitValue:"",  
                    },{
                        busName:"xxx",
                        voltageLevel:"",
                        startDate:"",
                        recoverDate:"",
                        continuedDate:"",
                        limitType:"",
                        limitValue:"",  
                    },{
                        busName:"xxx",
                        voltageLevel:"",
                        startDate:"",
                        recoverDate:"",
                        continuedDate:"",
                        limitType:"",
                        limitValue:"",  
                    },{
                        busName:"xxx",
                        voltageLevel:"",
                        startDate:"",
                        recoverDate:"",
                        continuedDate:"",
                        limitType:"",
                        limitValue:"",  
                    },
                ],
                tableHead: [
                    {name: "母线名称", value: 'busName',  },
                    {name: "电压等级", value: 'voltageLevel',  },
                    {name: "开始时间", value: 'startDate', },
                    {name: "恢复时间", value: 'recoverDate',  },
                    {name: "持续时间(分钟)", value: 'continuedDate', },
                    {name: "越限类型", value: 'limitType',  },
                    {name: "越限极值", value: 'limitValue',  },
                ],
                currentPage: 1, // 当前页码
                total: 20, // 总条数
                pageSize: 2, // 每页的数据条数
            };
        },
        mounted() {
        },
        methods: {
            // 表格分页---前端分页
            //每页条数改变时触发 选择一页显示多少行
            handleSizeChange(val) {
                this.currentPage = 1;
                this.pageSize = val;
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                this.currentPage = val;
            },

        }
    };
</script>

<style lang="less">
    .v-table {
        //分页样式
        .block-box{
            width: 100%;
            height: 50px;
            margin-top: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
</style>

到了这里，关于40、使用elementUI分别实现前端，后端表格分页的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！