vue表格实现前端分页

前端分页的基本思想就是，后端接口全部返回list数据信息，由前端根据页数和每页条数截取数组，达到分页的目的；

//1.table的data截取
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
//2.total的值是后端返回的list的长度
:total="tableData.length"

demo:（根据自己的需求改吧改吧就行）

<template><div><el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table><!-- 分页器 --><div class="block" style="margin-top:15px;"><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: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄"},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄"},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄"},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄"}],currentPage: 1, // 当前页码total: 20, // 总条数pageSize: 1 // 每页的数据条数};},methods: {handleSizeChange(val) {console.log(`每页 ${val} 条`);this.currentPage = 1;this.pageSize = val;},handleCurrentChange(val) {console.log(`当前页: ${val}`);this.currentPage = val;}}
};
</script>

vue表格实现前端分页相关推荐

vue+elementUI实现前端分页
vue+elementUI实现前端分页前言代码前言大多数情况下都是后端做分页的,前端只需要传递 currentpage / pagesize 即可,当然也有可能遇到后端没有做分页的情况,这时前 ...
Vue+ElementUI纯前端技术实现对表格数据的增删改查
Vue+ElementUI纯前端技术实现对表格数据的增删改查页面展示效果一.页面结构分为三个部分 head body 以及script 一般我个人是在head中引入一些组件库 , 还有一些样式 ...
Vue+element-ui实现表格数据渲染+分页
Vue+element-ui实现表格数据渲染+分页具体属性请看官方文档:Table 表格这里给大家看一个比较不错的表格数据渲染的例子,也是我目前所写的项目中的一部分. 这里呢我们就不给大家说顶栏和 ...
前端Vue+ElementUI的Pagination分页组件实现分页展示后端Spring Boot +Mybatis Plus实现分页接口
前端Vue+ElementUI的Pagination分页组件实现分页展示 & 后端Spring Boot +Mybatis Plus实现分页接口很久没有更新博客了,主要原因是博主一直在补充自 ...
vue+elementUI组件table实现前端分页功能
前端分页和后端分页就是请求的差异,前端分页的话只请求一次,所以要在render table组件的时候控制下数据 :data="tableData.slice((currentPage-1)* ...
vue element-----实现table前端分页
代码实现展示: <template><div><el-table :data="tableList" border style="width ...
vue element-UI前端分页
需求:后台获取数据,在前端分页说明:在table组件加入 :data="tableData.slice((currentPage-1)*pagesize,currentPage*pages ...
Ant Design Vue 表格筛选时只进行前台的按页筛选修改为后台的全局筛选
原因分析在我们使用 Ant Design Vue 表格筛选功能时会发现,如果只是按照例子来,只是前端的按页筛选,并不能都进行全局筛选,原因有两点: 1.我们筛选的时候,只是进行前端的数据过滤,并没有 ...
开源Vue表格组件，表格插件源码
开源Vue表格组件,表格插件源码前言: 关于html里面原生的table,通常满足不了程序员的要求.所以开发了一款表格插件,其功能有: 1 导入json格式数据后,自动填充表格.表格长宽自适应.排 ...

vue表格实现前端分页

vue表格实现前端分页相关推荐

最新文章

热门文章