关于javascript:假分页数据处理

假分页数据处理 次要应用 filter

页面

<tab-list
    :headerProp="headerProp"
    :type="{type:'index', name:' 序号 '}"
    :pager="pager"
    :list="status | filterList(shipCode,callCode,username,list,pager)"
    :loading="loading"
    @onChangePageInfo="handleChangePageInfo"
    maxWidth="1200"
    maxHeight="570"
</tab-list>

filter

filters:{
    // 字典解决
    filtersShipType(type,dictData){if(dictData['ship_type'] && dictData['ship_type'][type]){return dictData['ship_type'][type]['title']
      }
      return ''
    },
    // 过滤分页
    filterList(status,shipCode,callCode,username,list,pager){let arr=[]
      function isContain(str,val){//str 被检索的字符串，val 子串
        let reg = new RegExp(val);//,'g'  g 全局匹配;
          return reg.test(str)
      }
      list.map(item=>{
        let checkStatus=true,checkShipCode=true,checkCallCod=true,checkUsername=true
        if(status && item.status!=status) checkStatus=false
        if(shipCode && !isContain(item.shipCode,shipCode)) checkShipCode=false
        if(callCode && !isContain(item.callCode,callCode)) checkCallCod=false
        if(username && !isContain(item.username,username)) checkUsername=false
        if(checkStatus && checkShipCode && checkCallCod && checkUsername){arr.push(item)
        }
      })
      return arr.slice((pager.currentPage-1)*pager.pageSize,pager.currentPage*pager.pageSize)
    }
  },

办法分页解决

methods:{
// 假分页 搜寻解决
    handleSearch(){
      this.status=this.tableQuery.status
      this.shipCode=this.tableQuery.shipCode
      this.callCode=this.tableQuery.callCode
      this.username=this.tableQuery.username
      this.pager.currentPage=1
      let te=this.$options.filters['filterList'];
      let resultFilter=te(this.status,this.shipCode,this.callCode,this.username,this.list,this.pager);
      this.pager.total=resultFilter.length
    },
    // 假分页 页码解决
    handleChangePageInfo(pager) {this.pager = pager;},
}

初始化列表 total

created() {this.InitInnerShipEntityList().then(res=>{
      this.pager.total=res.length
      this.list=res
    })
  },