Vue el-table全表搜索,模糊匹配
这是项目管理系统的界面,有一天,老大突然说想增加某某某列的筛选,一天一个需求。我就想着,与其听他说增加某列的筛选,不如我增加一个全表筛选,这样老大就不会再烦我了getAllList是搜索按钮的click事件,this.keywords绑定了搜索框v-modelasync getAllList() {this.loading = true;await this.$request({url: "/cm
·
这是项目管理系统的界面,有一天,老大突然说想增加某某某列的筛选,一天一个需求。我就想着,与其听他说增加某列的筛选,不如我增加一个全表筛选,这样老大就不会再烦我了
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的列搜索了,例如这种,贼麻烦
更多推荐
已为社区贡献1条内容
所有评论(0)