vue 实现简单表格分页功能

使用框架实现表格展示和跳转功能，一直不懂原理。所以自己写一个简单的，加深理解。

布局分为2块，上面是表格展示数据，下面是点击按钮跳转。
效果图：

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>table {border-collapse: collapse;}table,th,td {border: 1px solid black;}.jump ul {display: flex;}.jump ul li {list-style: none;}</style></head><body><div id="app"><!-- 展现数据的表格 --><table><!-- 表头 --><tr><th>姓名</th><th>年龄</th><th>性别</th><th>操作</th></tr><!-- 每一行数据 --><tr v-for="(item,index) in currentList" :key="index"><td>{{item.name}}</td><td>{{item.age}}</td><td>{{item.gender}}</td><td><button>修改</button><button>删除</button></td></tr></table><!-- 点击跳转按钮部分 --><div class="jump"><ul><li><button @click="goto(1)">首页</button></li><li v-for="(item,index) in getPageNum()"><button @click="goto(item)">{{item}}</button></li><li><button @click="goto(totalPage)">尾页</button></li></ul></div></div></body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>new Vue({el: "#app",data: {// 总页数totalPage: 0,//   每页包含数据条数pageSize: 5,//   当前在第几页currentPage: 1,//   当前页面的数据currentList: [],//   表格的总体数据dataList: [{name: "stu1",age: 20,gender: "male",},{name: "stu2",age: 21,gender: "male",},{name: "stu3",age: 20,gender: "male",},{name: "stu4",age: 20,gender: "male",},{name: "stu1",age: 20,gender: "male",},{name: "stu2",age: 21,gender: "male",},{name: "stu3",age: 20,gender: "male",},{name: "stu4",age: 20,gender: "male",},{name: "stu1",age: 20,gender: "male",},{name: "stu2",age: 21,gender: "male",},{name: "stu3",age: 20,gender: "male",},{name: "stu4",age: 20,gender: "male",},],},created() {// 计算一共有多少页this.totalPage = Math.ceil(this.dataList.length / this.pageSize);this.getPageData(1);},methods: {// 获取页码数组，用于渲染点击跳转buttongetPageNum() {pageList = [];for (let index = 0; index < this.totalPage; index++) {pageList[index] = index + 1;}return pageList;},//   更新表格页面显示数据getPageData(index) {this.currentList = this.dataList.slice((index - 1) * this.pageSize,index * this.pageSize);},//   跳转到指定页面goto(index) {this.getPageData(index);},},});
</script>

vue 实现简单表格分页功能相关推荐

如何在vue中使用表格分页功能
直接上代码: 这里是这里是template部分,主要由一个需要分页的表格和一个分页器组成.重点在于表格的data属性用到了一个slice截取方法. <el-tablev-loading=&quo ...
vue php 分页组件,基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage.不了解Vue.js的童鞋可 ...
基于Vue.js的表格分页组件
转载自基于Vue.js的表格分页组件有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫Bo ...
Vue+ElementUI table表格分页
Vue+ElementUI table表格分页分页的两种方式.前端分页,后端分页.两种方式各有个的优缺点吧. 前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理.但 ...
jquery实现简单的分页功能
jquery实现简单的分页功能本文适合少量数据的使用,如果数据条数过多,不太适合! 页面html代码 <table>  </table> ...
vue实现简单表格组件
本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解 ...
python嵌入html_Python odoo中嵌入html简单的分页功能
在odoo中,通过iframe嵌入 html,页面数据则通过controllers获取,使用jinja2模板传值渲染 html页面分页内容,这里写了判断逻辑首页 {% if current_page ...
手动实现表格分页功能
在浏览器端实现分页,一次性获取全部数据,根据当前页数和每页记录数选择性显示/隐藏 <td colspan="9"><span class="pull-l ...
element表格分页功能
element表格分页效果图 1.添加表格和分页组件 <el-table stripe :data="tableData.slice((currentPage-1)*pagesize ...

vue 实现简单表格分页功能

vue 实现简单表格分页功能相关推荐

最新文章

热门文章