vue中优雅的实现前端列表多条件筛选1、先上图：
invite2、搜索条件绑定的数据是：
filterForm:{
schoolName:'',//输⼊的学校名称
position:'',//选择的区域区域
schoolLevel:"",//选择的学校办别
},
schoolList:[
大学视频教程网
{schoolName:'青岛市实验⾼级中学',schoolLevel:"",position:'⼭东省青岛市城阳区硕阳路69号'}, {schoolName:'⼭东省青岛第⼆中学',schoolLevel:"",position:'⼭东省青岛市崂⼭区松岭路70号'}, {schoolName:'⼭东省青岛第⼀中学',schoolLevel:"",position:'⼭东省青岛市市南区单县路46号'}, {schoolName:'⼭东省青岛第三⼗九中学',schoolLevel:"",position:'市南区登州路5号'},
impressionism
{schoolName:'⼭东省青岛第六中学',schoolLevel:"",position:'⼭东省青岛市黄岛区云台⼭路66号'}, {sch
观点英语oolName:'⼭东省青岛第⼗九中学',schoolLevel:"",position:'⼭东省青岛市即墨区鳌⼭卫街道卫场路69号'}, {schoolName:'青岛艺术学校',schoolLevel:"",position:'青岛市李沧区九⽔路176号'},
{schoolName:'⼭东省青岛第九中学',schoolLevel:"",position:'⼭东省青岛市黄岛区七星河路559号'}, {schoolName:'青岛电⼦学校',schoolLevel:"",position:'⼭东省青岛市市北区台东⼀路118号'}
],//其中schoolList是元数据
resull:[]//搜索结果，也是列表循环的数据
3、监听：
watch:{
// 监听对象变化
filterForm:{
handler(val, oldVal){
if(val){
大学英语精读第三册课后答案
// 如果筛选条件全为空，查全部；否则按条件筛选
var objIsEmpty =this.filterForm.schoolName ==''&&this.filterForm.schoolLevel ==''&&this.filterForm.position ==''
vrm
if(objIsEmpty){
}el{
// /拿到有值的参数
let tempFilter ={};
for(var key in this.filterForm){
if(typeof(this.filterForm[key])!="undefined"&&typeof(this.filterForm[key])!="null"&&this.filterForm[key]!=null&&this.filterForm[key]!=""){ tempFilter[key]=this.filterForm[key];
}
}
// console.log(tempFilter,'输出tempFilter')
invictus
//筛选
(item)=>{cnki翻译助手
let flag =fal;
for(key in tempFilter){
console.log(key,'输出key')
if(item[key].toString().indexOf(tempFilter[key].toString())>=0){
flag =true;
}el{
flag =fal;
break;
}
}
if(flag){
return item;人际交往能力
}
}
);
lily英语首页console.sult,'输出筛选结果')
}
}
},
deep:true
}
}
