Vue中使用前端形式过滤已返回到数据列表
已经返回到列表,通过前端的搜索框再次过滤,而不走查询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])
}
})
})
},
作者:ukyo--碳水化合物
出处:https://www.cnblogs.com/ukzq/p/17056205.html
版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!