在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue如何實(shí)現(xiàn)多條件模糊查詢

vue如何實(shí)現(xiàn)多條件模糊查詢

1.現(xiàn)有一個數(shù)據(jù)列表，數(shù)據(jù)如下：

clipboard.png

2.需要增加一個多條件模糊查詢功能，即輸入一個或多個條件時，對原數(shù)據(jù)進(jìn)行篩選

clipboard.png

3.有沒有比較好的辦法實(shí)現(xiàn)？求解

回答
編輯回答
誮惜顏

測試：

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實(shí)現(xiàn)：

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)
    })
  }
}
2017年11月14日 07:49
編輯回答
入她眼

前后端配合 每個字端 參數(shù)變化 去搜索 根據(jù)@change 事件來實(shí)現(xiàn) 全靠前端的話 多條件不好實(shí)現(xiàn)把

2017年7月3日 03:30