vue+element实现分页及条件搜索功能(纯前端分页)

2024-06-03 12:40| 来源: 网络整理| 查看: 265

学习vue+element做用户条件分页查询遇到的坑

html页面主要代码： ps：(table :data 直接使用 list整个对象赋值，纯前端分页功能实现)

1. 搜索编辑删除

页面主要注意部分：

⑴:data="userInfo.slice((currentPage1)*pageSize,currentPage*pageSize" ⑵

js主要代码：

new Vue({ el: '#user', data: { form: { name: '', password: '', }, list: [], userInfo: [], search: '', currentPage: 1, pageSize: 5, totalNum: 100, }, created() { console.log("初始化..."); this.getUserInfo(); }, methods: { //页码首次加载进行列表展示 getUserInfo() { axios.get('http://localhost:8081/note/auth/getUsers' ).then((res) => { console.log(res.data.data); //后台返回结果对象赋值userinfo this.userInfo = res.data.data; //实现分页逻辑 this.getList(); }).catch(function (error) { console.log(error); this.$message.error('获取用户信息失败'); }); }, //调用同步方法，后面解释 async getUserInfoTmp() { return await axios.get('http://localhost:8081/note/auth/getUsers' ).then((res) => { console.log(res.data.data); this.userInfo = res.data.data; }).catch(function (error) { console.log(error); this.$message.error('获取用户信息失败'); }); }, //该方法也相应改为同步，否则this.getUserInfoTmp()会有错误提示。 async getList() { //条件查询时先获取全部信息 await this.getUserInfoTmp(); console.log('this.userInfo总记录数为='+this.userInfo); //前端过滤条件查询信息 let list = this.userInfo.filter(data => !this.search || data.userName.toLowerCase().includes(this.search.toLowerCase())); console.log('list条件查询后为='+list); //二次赋值 this.userInfo = list; console.log('this.userInfo最终赋值为='+this.userInfo); list.filter((item, index) => index = this.pageSize * (this.currentPage - 1)); this.totalNum = list.length }, handleSizeChange(val) { console.log('每页'+val+'条'); this.pageSize = val; this.getList(); }, handleCurrentChange(val) { console.log('当前页:'+val); this.currentPage = val; this.getList(); }, //搜索方法 searchData() { this.currentPage = 1; this.getList(); } } });

以上就是纯前端实现分页功能，后台就通用一个用户全部信息查询方法。条件查询实现思路： 1、先进行全部信息查询 2、前端进行条件过滤查询 3、将过滤的对象直接赋值给table :data.整个对象该过程中遇到的难点： this.userInfo = list;赋值成功，页面显示失败！控制台日志： this.userInfo总记录数为=[Object Object]，[Object Object]，[Object Object]，[Object Object]，[Object Object]，[Object Object] list条件查询后为=[Object Object]，[Object Object] this.userInfo最终赋值为=[Object Object]，[Object Object]

该方法async getList()首先会调用await this.getUserInfoTmp()方法。 await this.getUserInfoTmp()里面获取到所有的用户信息进行userinfo赋值：this.userInfo = res.data.data; 然后代码继续往下走，条件过滤后this.userInfo = list;二次赋值。但是最后页面始终显示六条全部的数据，并非list的两条数据。(就最后一步页面数据显示问题害的我搞到凌晨4点，网上搜了各种方法，set/splice等等，全部都不行~~！最后放弃先睡觉了)

一觉睡起来，我只好找好兄弟“呆子”进行请教，他看了我的代码先骂了一顿，格式问题严重，效率低下等，哈哈~ 最后他看了大概20分钟就分析说道：逻辑看起来没有问题，axios默认异步处理，尽管先执行的this.getUserInfoTmp()方法赋值全部数据，后面在赋值list数据，但是跟踪发现异步加载其实慢于list赋值的代码表面顺序逻辑。固这快的异步方法需要改成同步 await this.getUserInfoTmp()；同步方法是后面加上去的。后面经过测试确实如此。MD只怪自己太不开窍，真是搞死我了~ 今天又试了后台逻辑：条件查询时直接调用后台查询接口(参数进行分支处理，空时查全部，非空走条件查)，查出来什么赋值什么。最后发现还是得用同步处理，因此最终全部使用前端逻辑，后台逻辑暂时搁置。

async getList() { let url = 'http://localhost:8081/note/auth/getUserWithParam'; url += '?userName=' + this.search; await axios.get(url).then((res) => { this.userInfo = res.data.data; }).catch(function (error) { this.$message.error('获取用户信息失败'); }); this.userInfo.filter((item, index) => index = this.pageSize * (this.currentPage - 1)); this.totalNum = this.userInfo.length }, 最后：再次感谢“呆子”~~

附：功能参考该文章：[https://blog.csdn.net/weixin_43216105/article/details/90043828#comments]

【本文地址】

公司简介

联系我们