Vue 表格进行filter全局搜索

Vue 表格进行filter全局搜索

1.data中数据：

//原始的表格数据，即被查找的数据
ShowFormList: [],
//查询时输入框输入的值
SearchStr:''，
//存放查找结果数组
SearchShowList：[]

2.查找方法如下：

SearcData(){
	//this.SearchStr为查询条件
    var SearchStr = this.SearchStr
    //判断是否存在查询条件
	if(SearchStr){
		this.SearchShowList = this.ShowFormlist.filter(function(ShowFormList){
		return Object.keys(ShowFormList).some(function(key){
		return String(ShowFormList[key].toLowerCase().indexOf(SearchStr)  > -1})})
	}
}else {
//如果没有查找值则结果为原数组
  this.SearchShowList = ShowFormList
}

3.代码解析：

函数1filter过滤： 当值为true时留下，值为false时过滤掉
函数2.Object.keys() 返回对象的属性，具体参考连接

https://blog.csdn.net/u014035151/article/details/53135610?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control

Object.keys().some 判断对象是否为空，即判断函数3的结果是否为空，为true则表示找到了含关键字的值,为false则被函数1 舍弃
函数3.查找并返回表格中包含搜索关键字SearchStr的下标值

function(key){
		return String(ShowFormList[key].toLowerCase().indexOf(SearchStr)  > -1}

ShowFormList[key]：为表格中每一列的值，列表格式