一次性查出所有数据，前端根据输入框、选择框、多选框等等条件过滤数据

最新推荐文章于 2023-04-18 11:18:36 发布

System.out.print

最新推荐文章于 2023-04-18 11:18:36 发布

阅读量1.6k

点赞数

分类专栏： vue 文章标签： vue 前端过滤前端 js过滤

本文链接：https://blog.csdn.net/weixin_40841731/article/details/83374573

版权

vue 专栏收录该内容

42 篇文章 4 订阅

订阅专栏

<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