一次性查出所有数据,前端根据输入框选择框多选框等等条件过滤数据
目录
一次性查出所有数据，前端根据输入框、选择框、多选框等等条件过滤数据
<script>
data () {
return {
allData:[], //一次性查出的所有数据
searchData:[], //前端过滤后的数据
searchCondition:{
name: '',
age: '',
birthday: ''
}
}
},
methods: {
selectData() {
let _this=this;
function FilterFUN(FilterList,Filterkey){
if(!_this.searchCondition[Filterkey]) return FilterList;
return FilterList.filter(item=>{ //利用数组的filter方法过滤并改变原来数组
if((item[Filterkey]+'').indexOf(_this.searchCondition[Filterkey])!=-1){
return item
}
});
};
let [...FilterList] = this.allData:; //深度复制数组
let Filterkey = _this.searchCondition:;
Object.keys(Filterkey).forEach(function(key){
FilterList = FilterFUN(FilterList,key);
});
this.searchData: = FilterList;
}
}
</script>说明：
1、页面渲染的时候用 searchData:[]。而原始数据不要动它。
2、_this.searchCondition[Filterkey] 这里取属性值要用【】 不能用_this.searchCondition.Filterkey
3、(item[Filterkey]+’’).indexOf(_this.addPageSelectForm[Filterkey])!=-1 简写成 a.indexOf(b) != -1 a、b分别是两个字符串，标识a字符串里包含有字符串b。 比如 “abcd”.indexOf(“bc”) != -1 结果为true