正文
vue---数据列表过滤筛选
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
使用vue进行数据过滤筛选是比较常用的功能，常见的使用场景就是搜索框数据筛选过滤了。简单示例：
<template>
<div>
<input type="text" v-model="search">
<ul>
<!-- 注意！注意！注意！这里循环遍历的是items，不再是data里的list数组 -->
<li v-for="(item,index) in items">
<span>{{item.name}}</span>
<span>{{item.msg}}</span>
<span>{{item.age}}</span>
<span>{{item.title}}</span>
</li>
</ul>
</div>
</template> <script>
export default {
name: "DataForm",
data() {
return {
search:'',
list:[
{id:0,name:'AAA',msg:'aaa文本介绍1',title:'水电费',age:366},
{id:1,name:'BBB',msg:'bbb文本介绍2',title:'赵子龙',age:235},
{id:2,name:'CCC',msg:'ccc文本介绍3',title:'赵性',age:587},
{id:3,name:'DDD',msg:'ddd文本介绍4',title:'展飞',age:654},
{id:4,name:'EEE',msg:'eee文本介绍5',title:'收费',age:987},
{id:5,name:'FFF',msg:'Aa文本介绍6',title:'收费',age:6985},
]
};
},
computed:{
// 筛选指定字段
items:function(){
let _search = this.search;
let reg = new RegExp(_search, 'ig');// 不区分大小写
if(_search){
return this.list.filter(function(item){
if((item.id.toString().indexOf(_search) != -1) || item.msg.match(reg) || (item.age.toString().indexOf(_search) != -1)){
return item;
}
});
}
return this.list;
},
// 筛选所有的字段
itemss: function() {
var _search = this.search;
console.log(_search);
if(_search){
// 不区分大小写处理
var reg = new RegExp(_search, 'ig')
// es6 filter过滤匹配，有则返回当前，无则返回所有
return this.list.filter(function(e) {
// 匹配所有字段
return Object.keys(e).some(function(key) {
return e[key].match(reg);
})
// 匹配某个字段
// return e.name.match(reg);
})
};
return this.list;
}
}
};
</script>
