引用场景如下,列表查询时需要用到前端查询
具体实现方法如下
前面定义的变量是查询条件,this.allData表示被筛选的数据,filteData是查询结果
queryData () { let officerType = this.search.officerType let officerName = this.search.officerName let position = this.search.position let filterData = this.allData.filter( item => { let isOfficerType = officerType.length > 0 && item.officerType.indexOf(officerType) === -1 ? false : true let isOfficerName = officerName.length > 0 && item.officerName.indexOf(officerName) === -1 ? false : true let isPosition = position.length > 0 && item.position.indexOf(position) === -1 ? false : true //返回筛选条件 return isOfficerType && isOfficerName && isPosition }) this.officerData = filterData },
因为有多个地方需要用到前端查询,我们可以进行封装
在util.js里面
// 前端查询 let queryData = function (query, allData) { //数据格式 // let query = [ // { // key: 'officerType', // value: this.search.officerType // },{ // key: 'officerName', // value: this.search.officerName // } // ] let filterData = allData.filter( item => { return query.every( innerItem => { return innerItem.value.length > 0 && item[innerItem.key].indexOf(innerItem.value) === -1 ? false : true }) }) return filterData }
组件里面调用
// 前端查询列表 queryData () { // 查询参数 let query = [ { key: 'teamType', value: this.search.teamType },{ key: 'teamName', value: this.search.teamName } ] let allData = this.allData // 被筛选数据 this.teamData = this.$util.queryData(query, allData) }