vue+element踩坑记-条件过滤后端返回数据渲染页面
vue+element踩坑记-条件过滤后端返回数据渲染页面
何处锦绣不灰堆
发布于 2020-05-29 09:35:32
发布于 2020-05-29 09:35:32
需求说明
今天写项目的时候出现了这样的一个问题，就是我们平常做数据交互的时候，直接请求接口，拿到后端返回的数组或者对象直接将table绑定的那个数组接收一个这个返回值就可以了，这也是最简单的一种，但是今天我遇到的是这样的，就是他也是返回一个数组回来，但是呢这个返回的数据是三个tab同时需要的数据，但是是根据不同条件筛选属于谁的，简单的重现一下场景：
场景重现
PS:那么一目了然了，数据1其实需要的是flag=a的数据，数据2需要的是flag=b的数据，数据3需要的是flag=c的数据，但是是出自同一个数组，所以这个时候我们直接渲染数据一定是不对的，我们需要给他进行一个简单的过滤！
js源码
/**
* @get_tableDatacloseaccount 获取已结账的list数据
*/
get_tableDatacloseaccount(){
let that = this;
let url = that.url+':9519/v1/finance/account/info_list';
that.$axios({
method: 'post',
url : url,
}).then((res)=>{
let arr = [];//将数据重新包装成数组格式
res.data.data.list.map((res,index)=>{
/**
* 对条件进行过滤，已结账的属于close_flag = c
*/
if(res.close_flag === 'c'){
arr.push(res);
console.info(arr);
}
that.total = arr.length;//拿到数据的总条数
that.tableDatacloseaccount = arr;//将数据重新渲染到table绑定的数组
});
}).catch((err)=>{
console.info(err);
})
},存在问题
可能很多人都发现了一个问题，就是这样是可以拿到数据的，但是却不可以进行任何的分页操作，为什么呢？我们可以想一下（想不到的可以自己直接打断点试一下），我们是可以拿到过滤后的数据，但是呢，当我们点击分页的时候，请求的是第二页的数据，这个时候后端其实给我们的还是没有过滤的数据，有人说了，再过滤一下不就行了吗？当然可以，但是你要明白，分页每一页的展示条数都是固定的，要么是十条或者是别的，但是总归是固定的，如果我们请求第二页的数据的时候，拿到了十条正常的数据，那么满足条件的只有三条，这个时候不过滤是错的，过滤的话就只会展示出来三条，用户会觉得我的数据不对，怎么第一页是五条，既然每一页是十条，为什么还有第二页呢？这就是一个错误的展示！当然如果没有分页的情况，这样是可以的，没有问题！
怎么解决
/**
* @get_tableDatacloseaccount 获取已结账的list数据
* @params close_flag 每一次请求的时候，都将标志位给后端，让后端进行筛选，将筛选后的数据拿到
*/
get_tableDatacloseaccount(){
let that = this;
let url = that.url+':9519/v1/finance/account/info_list';
that.$axios({
method: 'post',
url : url,
params: {
find_cond : JSON.stringify({close_flag : 'c'})
}
}).then((res)=>{
that.total = res.data.data.total_count;
that.tableDatacloseaccount = arr;
});
}).catch((err)=>{
console.info(err);
})
},其实我们前端很多的时候是不愿意做数据的过滤处理的，原则上我们是拿到什么展示什么，这样对页面的压力是最小的，js虽然本身是一门动态语言，但是我觉得数据处理这块还是后端做是最快的，毕竟他们是距离数据库最近的。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-04-13 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录