这是项目管理系统的界面,有一天,老大突然说想增加某某某列的筛选,一天一个需求。我就想着,与其听他说增加某列的筛选,不如我增加一个全表筛选,这样老大就不会再烦我了

 getAllList是搜索按钮的click事件,this.keywords绑定了搜索框v-model

async getAllList() {
  this.loading = true;
  await this.$request({
	url: "/cmdb/searchBySome/",
	method: "get",
	params:{
	  query:""
	}
  })
	.then(res => {
	  // 后端传过来的数据是一个对象数组,因为每个对象的属性是一样的,因此只获取了第一个对象的key List
	  let filterList = filterList=Object.keys(res.data[0])
	  if(this.keywords){
		
		this.allList=res.data.filter(v=>{
		  //some是一个为true,即结果为true
		  return filterList.some(key=>{
			//要toString是因为对象里有id,id是int类型,要转为字符串类型
			return v[key].toString().indexOf(this.keywords)>-1
		  })
		})
	  }else{
		this.allList=res.data
	  }
	  this.total = this.allList.length;
	  this.currentPage = 1
	  this.loading = false;
	})
	.catch(err => {
	  this.loading = false;
	});
},

然后结果就实现了

 想搜啥就搜啥,老大再也不用找我写重复的代码了。如果不用全表搜索,只能用el-table的列搜索了,例如这种,贼麻烦

Logo

前往低代码交流专区

更多推荐