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

╰半夏微凉° 2022-04-24 01:02 597阅读 0赞

##### 需求说明 #####

今天写项目的时候出现了这样的一个问题，就是我们平常做数据交互的时候，直接请求接口，拿到后端返回的数组或者对象直接将table绑定的那个数组接收一个这个返回值就可以了，这也是最简单的一种，但是今天我遇到的是这样的，就是他也是返回一个数组回来，但是呢这个返回的数据是三个tab同时需要的数据，但是是根据不同条件筛选属于谁的，简单的重现一下场景：  
![场景重现][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9jbGVhcmxvdmUuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]

> 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虽然本身是一门动态语言，但是我觉得数据处理这块还是后端做是最快的，毕竟他们是距离数据库最近的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9jbGVhcmxvdmUuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: /images/20220221/fbce0c0d21794fce99fa57e25fe42246.png