首页 > 其他分享 >Vue中使用前端形式过滤已返回到数据列表

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

时间:2023-01-16 20:14:57浏览次数:48  
标签:Vue return log format 列表 item 过滤 key console

已经返回到列表,通过前端的搜索框再次过滤,而不走查询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])
          }
        })
      })
    },

标签:Vue,return,log,format,列表,item,过滤,key,console
From: https://www.cnblogs.com/ukzq/p/17056205.html

相关文章