vue如何实现多条件模糊查询

Question

1.现有一个数据列表，数据如下：

2.需要增加一个多条件模糊查询功能，即输入一个或多个条件时，对原数据进行筛选

3.有没有比较好的办法实现？求解

Answer 1

前后端配合 每个字端 参数变化 去搜索 根据@change 事件来实现 全靠前端的话 多条件不好实现把

Answer 2

测试：

var dispatchOrderList = [{ a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }]
var filterItems = { //删选的六个条件
  a: '',
  b: '',
  c: '',
  d: '',
  e: '',
  f: ''
}
function filter(){
  console.log('filterItems', filterItems)
  return dispatchOrderList.filter(order => {
    return Object.keys(filterItems).reduce((flag, item) => {
      if (!flag) {
        return false
      } else {
        return filterItems[item].trim() ? String(order[item]).indexOf(filterItems[item]) !== -1 : true
      }
    }, true)
  })
}

console.log('res', filter())
filterItems.a = '1'
console.log('res',filter())
filterItems.b = '1'
console.log('res',filter())
filterItems.b = '2'
filterItems.c = '3'
console.log('res',filter())

Vue实现：

data(){
  return {
    dispatchOrderList: [{ a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}],
    filterItems: { //删选的六个条件
      a: '',
      b: '',
      c: '',
      d: '',
      e: '',
      f: ''
    }
  }
},
watch(){
  'filterItems':function(newVal){
    return this.dispatchOrderList.filter(order=>{
      return Object.keys(filterItems).reduce((flag, item)=>{
        if(!flag){
          return false
        } else {
          return filterItems[item].trim() ? String(order[item]).indexOf(filterItems[item]) !== -1 : true
        }
      },true)
    })
  }
}