vue 项目根据多条件筛选数组

1.需求:多条件筛选数组----废话不哆嗦,直接上图

 data(){
    return{
      form:{
        name:'',
        age:'',
        adder:'日本'
      },
      arr:[{
        name:'名字1',
        age:'1',
        adder:'北京'
      },{
        name:'名字2',
        age:'2',
        adder:'上海'
      },{
        name:'名字3',
        age:'3',
        adder:'东莞'
      },{
        name:'名字4',
        age:'4',
        adder:'日本'
      },{
        name:'名字5',
        age:'5',
        adder:'日本'
      }]
    }
  },

this.form里面就是条件,里面字段随便加

 mounted() {
 	//this.form  *** 筛选条件
  	//this.arr*** 筛选数组
    this.$filterData(this.form,this.arr) //得到新的数组
  },
//main.js里面,自己喜欢放哪里就放哪里
Vue.prototype.$filterData=function (form,list){
    let arr = list
    Object.keys(form).forEach(e => {
        if (form[e] == undefined || form[e] == '') return arr
        arr = arr.filter(p => p[e].indexOf(form[e]) > -1)   //匹配成功返回
    })
    return arr
}

返回图:
vue 项目根据多条件筛选数组_第1张图片
vue 项目根据多条件筛选数组_第2张图片

白嫖到有用就留个脚印呗!!!!!

你可能感兴趣的:(工作遇到的问题,封装组件,vue.js,javascript,前端)