假分页数据处理

假分页数据处理 主要使用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
    })
  },