第1===》收集当前页码 和 每页显示条数

第2==》发送ajax请求页码 和 每页显示条数发送给后端

第3===》接收后端返回的数据总条数 total 和 当前页码的数据 data
 
第3===》如果当前页没有数据 且 排除第一页,防止出现删除当前页后出现页面没有数据
 
<div style="margin-top: 20px; text-align: left;">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[1, 3, 5, 10, 20, 50]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
</div>

  

 // 数据
data() {
return { currentPage: 1, // 当前页
total: 0, // 数据总条数
pageSize: 3 // 每页条数
};
},

  

methods:{
// 按照分页显示数据的函数
getAccountListByPage() {
// 收集当前页码 和 每页显示条数
let pageSize = this.pageSize;
let currentPage = this.currentPage; // 发送ajax请求 把分页数据发送给后端
this.axios
.get("http://127.0.0.1:666/account/accountlistbypage", {
params: {
pageSize,
currentPage
}
})
.then(response => {
console.log("对应页码的数据:", response.data);
// 接收后端返回的数据总条数 total 和 对应页码的数据 data
let { total, data } = response.data;
// 赋值给对应的变量即可
this.total = total;
this.accountTableData = data;
// 如果当前页没有数据 且 排除第一页
if (!data.length && this.currentPage !== 1) {
// 页码减去 1
this.currentPage -= 1;
// 再调用自己
this.getAccountListByPage();
}
})
.catch(err => {
console.log(err);
});
}, // 每页显示条数改变 就会触发这个函数
handleSizeChange(val) {
// 保存每页显示的条数
this.pageSize = val;
// 调用分页函数
this.getAccountListByPage();
},
// 当前页码改变 就会触发这个函数
handleCurrentChange(val) {
// 保存当前页码
this.currentPage = val;
// 调用分页函数
this.getAccountListByPage();
}, }

  

后端用node写的代码

/*
按分页显示账号列表的路由 /accountlistbypage
*/
router.get("/accountlistbypage", (req, res) => {
// 接收前端参数
let { pageSize, currentPage } = req.query;
// 默认值
pageSize = pageSize ? pageSize : 3;
currentPage = currentPage ? currentPage : 1; // 构造sql语句 (查询所有数据 按照时间排序)
let sqlStr = `select * from account order by ctime desc`;
// 执行sql语句
connection.query(sqlStr, (err, data) => {
if (err) throw err;
// 计算数据总条数
let total = data.length; // 分页条件 (跳过多少条)
let n = (currentPage - 1) * pageSize;
// 拼接分页的sql语句
sqlStr += ` limit ${n}, ${pageSize}`; // 执行sql语句 (查询对应页码的数据)
connection.query(sqlStr, (err, data) => {
if (err) throw err;
// 把数据返回给前端 两个数据 数据总条数 total 和 对应页码的数据 data
res.send({
total,
data
});
});
});
});

  

vue+node+elementUI实现分页功能的更多相关文章

  1. vue+node+elementUI实现注册功能

    后端代码 在后端的文件 routes文件夹下的connect.js文件中 // 引入mysql const mysql = require('mysql'); // 创建连接对象 const conn ...

  2. vue修改elementUI的分页组件视图没更新问题

    转: vue修改elementUI的分页组件视图没更新问题 今天遇到一个小问题平时没留意,el-pagination这个分页组件有一个属性是current-page当前页.今天想在methods里面手 ...

  3. vue+node+mongodb实现的功能

    用vue+node +mongodb实现前后台交互的页面代码,已经上传到github上, 地址是: https://github.com/GainLoss/vue-node-mongodb https ...

  4. vue element-ui 做分页功能之封装

    在 vue 项目中的 components 中 创建一个 文件夹,文件夹里创建一个 name(这个名字你随意取).vue <template>   <div class=" ...

  5. vue+node.js+webpack开发微信公众号功能填坑——v -for循环

    页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...

  6. vue+Element-ui实现分页效果

    当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了. 1.本次所使用的是vue2.0+element-ui ...

  7. Vue 分页功能伪代码实现

    Vue分页功能的实现 其实分页功能是一个比较简单的demo 后端写好pageNum和pageSize的接口直接传参就是了 // 这里我们假设后端已经写好了 pageNum和pagesize <v ...

  8. vue+element-ui 实现分页(根据el-table内容变换的分页)

    官方例子 官方提示: 设置layout,表示需要显示的内容,用逗号分隔,布局元素会依次显示.prev表示上一页,next为下一页,pager表示页码列表,除此以外还提供了jumper和total,si ...

  9. vue+elementUI实现 分页表格的单选或者多选、及禁止部分选择

    一.vue+elementUI实现 分页表格前的多选 多选效果图: 代码如下: <el-table ref="multipleTable" :data="listD ...

随机推荐

  1. CSS .css边框属性(border)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Delphi 设置程序图标为系统默认图标

    Windows VCL 程序: 1. 用文本编辑器打开Delphi项目的.dproj文件.2. 搜索关键字“<Icon_MainIcon>”,查找Icon_MainIcon元素.3. 将所 ...

  3. 剑指Offer-36.数字在排序数组中出现的次数(C++/Java)

    题目: 统计一个数字在排序数组中出现的次数. 分析: 给定一个已经排好序的数组,统计一个数字在数组中出现的次数. 那么最先想到的可以遍历数组统计出现的次数,不过题目给了排序数组,那么一定是利用了排序这 ...

  4. ubuntu下使用redshift开启护眼模式

    前面提到flux这东西在一些机器上并不能work,而且也找到了一些关于他不能work的线索(戳这里看原因).根据这些线索我们发现用flux不行了,得换用redshift,那好吧,我们就来装redshi ...

  5. 【CodeChef】December Challenge 2019 Div1 解题报告

    点此进入比赛 这次比赛本来想好好打的,但不幸的是,这周先是要认真复习准备月考,考完又是发烧在床上躺了一个周末,所以最终没能打完. 我还是好弱啊. \(T1\):Binary XOR(点此看题面) 大致 ...

  6. 【WPF on .NET Core 3.0】 Stylet演示项目 - 简易图书管理系统(2) - 单元测试

    上一章中我们完成了一个简单的登录功能, 这一章主要演示如何对Stylet工程中的ViewModel进行单元测试. 回忆一下我们的登录逻辑,主要有以下4点: 当"用户名"或" ...

  7. 终结 finalize() 和对象引用

    一.finalize() 方法 1. 为什么要有 finalize() 方法? 假定你的对象(并非使用new)获得了一块“特殊”的内存区域,由于垃圾回收器只知道释放那些经由 new 分配的内存,所以他 ...

  8. 【Sublime】Sublime 常用插件

    1.sublime设置默认浏览器及打开网页的快捷键设置插件 名称:SideBarEnhancements 地址:https://github.com/titoBouzout/SideBarEnhanc ...

  9. oracle学习笔记(二十三)——JDBC调用存储过程以及批量操作

    jdbc调用存储过程 使用并获得out模式的参数返回值 //存储过程为sum_sal(deptno department.deptno%type,sum in out number) Callable ...

  10. .NET MVC5简介(六)HttpHandler

    浏览器到网站程序 上一篇中,介绍IHttpModule的时候,自定义一个类CustomHttpModule继承自IHttpModule,自定义一个事件,并配合配置文件,就可以执行自定义Module中的 ...