Vue中使用前端形式过滤已返回到数据列表

已经返回到列表,通过前端的搜索框再次过滤,而不走查询api。

return getDeviceListByCellIdApi(this.params).then((res) => {
          // res.results
          console.log('get cell bind devices')
          console.log(res.results)
          const cleanQueryParams = Object.assign({}, {}, this.queryParam)
          console.log('cleanQueryParams', cleanQueryParams)
          const list = this.filterArray(res.results, cleanQueryParams)
           console.log('list', list)
          return {
            pageNo: this.params.page,
            pageSize: this.params.page_size,
            totalCount: list.length,
            totalPage: Math.ceil(list.length / this.params.page_size),
            data: list
          }
        })

注意高亮的这一行:(因为有些字段是在obj里面所有略微冗长,而如果都是普遍字段,
则可以直接用return !reg.test(item[key])进行模糊查询或者==判定),
另外注意!filterKeys.some使用了!:

    filterArray(sourceArray, filterObj) {
      // eslint-disable-next-line eqeqeq
      const filterKeys = Object.keys(filterObj).filter(it => filterObj[it].length != 0 && it !== 'is_bind')
      console.log('filterKeys', filterKeys)
      return sourceArray.filter(item => {
        return !filterKeys.some(key => {
          if (key === 'binded_at') {
            console.log(filterObj[key])
            var rangeMoments = filterObj[key]
            if (item[key]) {
              console.log(rangeMoments[0].format('YYYY-MM-DD HH:mm:ss'))
              console.log(rangeMoments[1].format('YYYY-MM-DD HH:mm:ss'))
              console.log(moment(item[key]).format('YYYY-MM-DD HH:mm:ss'))
              return !moment((moment(item[key]).format('YYYY-MM-DD HH:mm:ss')))
                .isBetween(rangeMoments[0].format('YYYY-MM-DD'), rangeMoments[1].format('YYYY-MM-DD 23:59:59'),
                undefined, '[]')
            }
            return true
          }
          // eslint-disable-next-line eqeqeq
          var reg = new RegExp(filterObj[key])
          if (key === 'icc_id' || key === 'mobile_number') {
            if (item.simInfo) {
              return !reg.test(item.simInfo[key])
            } else {
              return true
            }
          } else if (key === 'get_full_name') {
            if (item.groupInfo) {
              return !reg.test(item.groupInfo[key])
            } else {
              return true
            }
          } else {
            return !reg.test(item[key])
          }
        })
      })
    },
posted @   ukyo--碳水化合物  阅读(211)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
主题色彩
人是要整活的——没活了,可不就是死了么?
点击右上角即可分享
微信分享提示