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

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

时间:2023-01-16 20:14:57浏览次数:52  
标签: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

相关文章

  • Vue使用momentjs来查询时间区间
    howdoesvuequeryrangewithMomentarrayhttps://stackoverflow.com/questions/14897571/moment-js-date-between-dateshttps://momentjs.com/docs/#/query/如果已......
  • vue+elementUI表单导致页面刷新
    vue+elementUI表单导致页面刷新点击按钮导致整个页面刷新,部分数据没有请求,偶尔会正常,可能和网络请求有关解决方法:可以在el-form标签上添加@submit.native.prevent或......
  • vue3.2 + element-plus 表单嵌套表格实现动态表单验证
    借鉴了这位兄弟的思想,进行了优化和vue3.2语法糖改造:https://blog.csdn.net/weixin_45295253/article/details/115582504实现:<template><el-formref="formRef":mod......
  • 【论文写作分析】之五《融合类别特征扩展与N-gram子词过滤的fastText短文本分类》
    [1]参考论文信息  论文名称:《融合类别特征扩展与N-gram子词过滤的fastText短文本分类》  发布期刊:《小型微型计算机系统》  期刊信息:CSCD扩展  论文写作分析摘要:......
  • 过滤器Filter
       ......
  • vue iframe组件封装
    界面内嵌iframe时,由空白节点引起底边间距,可设置iframe属性vertical-align:top解决<template><divv-loading="loading":style="'height:'+height"><iframe......
  • vue事件修饰符
    从vue中看,事件处理函数内部应该更多的聚焦业务功能的实现上,而不是这些琐碎的时间对象处理所以vue提供了很多事件修饰符keyup键盘事件`<input@keyup.enter="submit">/......
  • Vue实现文件上传和下载功能
    本文实例为大家分享了Vue实现文件上传和下载功能的具体代码,供大家参考,具体内容如下1、a标签download属性在H5中,为a标签新增了一个download属性,来直接文件的下载,文件名就......
  • Vue.js框架:引入Element-ui和国际化i18n组件冲突及兼容问题处理
    一、问题如下要使用element-ui的表格时,在main.js中同时全局引入了element和i18n时,页面会报错如下:Errorinrender: TypeError:Cannotreadpropertiesofund......
  • vue将地区以对象、数组的格式传给后端
    项目涉及到了一个地区筛选,同时省市区三级不进行关联,后端要求以对象包数组的格式传参,完整代码1、先拿到接口返回的地区数据对数据进行处理,拿到想要的格式this.province......