Vue+Element-UI 实现前端分页功能,利用el-table和el-pagination组件实现表格前端分页

Vue+Element-UI 实现前端分页功能,利用el-table和el-pagination组件实现表格前端分页:

当table的数据量比较大的时候,一个屏幕展示不出全部的数据,这个时候就需要分页显示。而多数情况下都是做的后端分页,就是将分页参数和查询条件一并传到后端,后端将当前页要显示的数据返回来。但是有时候会遇到后端也是去调用了其它系统的接口,这时候返回到前端的是所有的数据,此时需要前端自行去进行分页显示。今天抽空写了个demo,效果如下:

有朋友要用el-table组件做前端分页的时候可以参考以下代码:

<template>

<div class="paging">

<div class="box_body">

<el-table :data="tableData" border size="small" style="width: 100%">

<el-table-column

label="序号"

prop="num"

min-width="150"

></el-table-column>

<el-table-column

label="姓名"

prop="name"

min-width="150"

></el-table-column>

<el-table-column

label="性别"

prop="sex"

min-width="150"

></el-table-column>

<el-table-column

label="年龄"

prop="age"

min-width="150"

></el-table-column>

</el-table>

<!--===分页=====-->

<el-pagination

:current-page="pageinfo.page"

:page-sizes="[10, 20, 30, 40]"

:page-size="pageinfo.size"

layout="total, sizes, prev, pager, next, jumper"

:total="pageinfo.total"

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

style="margin-bottom: 3px"

></el-pagination>

</div>

</div>

</template>

<script>

export default {

name: "paging",

data() {

return {

// 从后端获取到的所有表格数据

sourceTableData: [],

// 页面要显示的表格数据

tableData: [],

// 分页信息

pageinfo: {

page: 1,

size: 10,

total: 0,

},

};

},

created() {

// 页面初始化时生成100条数据,模拟从后端获取所有数据

let arr = [];

for (let i = 0; i < 100; i++) {

let obj = {};

obj.num = i + 1;

obj.name = "name" + (i + 1);

obj.sex = Math.round(Math.random()) == 0 ? "男" : "女";

obj.age = 20 + Math.round(Math.random() * 30);

arr.push(obj);

}

this.sourceTableData = arr;

// 初始化算出第一页数据

this.tableData = this.currentChangePage(

this.pageinfo.size,

this.pageinfo.page

);

this.pageinfo.total = this.sourceTableData.length;

},

methods: {

/** 切换每页显示条数 */

handleSizeChange(val) {

this.pageinfo.page = 1;

this.pageinfo.size = val;

this.tableData = this.currentChangePage(val, this.pageinfo.page);

},

/** 切换分页 */

handleCurrentChange(val) {

this.pageinfo.page = val;

this.tableData = this.currentChangePage(this.pageinfo.size, val);

},

// 分页方法(用于表格数据后端不分页,放到前端做分页)

currentChangePage(size, current) {

const tablePush = [];

let array = JSON.parse(JSON.stringify(this.sourceTableData));

array.forEach((item, index) => {

if (size * (current - 1) <= index && index <= size * current - 1) {

tablePush.push(item);

}

});

return tablePush;

},

},

};

</script>

<style>

.paging {

width: 100%;

height: 100%;

}

.box_body {

width: 1200px;

margin: 50px auto;

}

</style>

相关推荐
慧一居士5 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead6 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js