es6条件查询筛选数据

引用场景如下,列表查询时需要用到前端查询

 具体实现方法如下

前面定义的变量是查询条件,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)
}
原文地址:https://www.cnblogs.com/qdlhj/p/12371269.html