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