vue+element踩坑记-条件过滤后端返回数据渲染页面

何处锦绣不灰堆

发布于 2020-05-29 09:35:32

1.9K0

发布于 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 删除

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

编程算法

登录后参与评论

0 条评论

热度