js
export default {
name: 'styleTest',
data() {
return {
formData: {
name: '',
phone: '',
sex: '',
},
realList: [],
list: [
{
name: '张址',
phone: 18715023011,
sex: 1,
},
{
name: '张三',
phone: 18715023012,
sex: 2,
},
{
name: '李四',
phone: 18715023013,
sex: 1,
},
{
name: '赵武',
phone: 18715023014,
sex: 2,
},
{
name: '晋南',
phone: 18715023015,
sex: 1,
},
{
name: '张东',
phone: 18715023016,
sex: 2,
},
],
};
},
filters: {
filterSex(val) {
switch (val) {
case 1:
return '男';
break;
case 2:
return '女';
break;
case 3:
return '不是人';
break;
default:
return '男';
}
},
},
computed: {
// realList() {
// let { name, phone, sex } = this.formData;
// if (name && phone && sex) {
// return this.list;
// }
// },
},
created() {
this.search({});
},
methods: {
search({ name, phone, sex }) {
this.realList = this.list.filter(item => {
let matchName = true; // 姓名 筛选
let matchSex = true; // 性别 筛选
let matchPhone = true; // 号码 筛选
if (sex) {
matchSex = item.sex == sex;
}
if (phone) {
// console.info(Object.prototype.toString.call(phone));
matchPhone = item.phone == phone;
}
if (name) {
// 模糊搜索;
const keys = name
.toUpperCase() // 转大写
.replace(' ', '') // 删掉空格
.split(''); // 切割成 单个字
matchName = keys.every(key => item.name.toUpperCase().includes(key));
}
return matchName && matchPhone && matchSex;
});
},
},
};感谢你能够认真阅读完这篇文章，希望小编分享的“vue怎么实现多条件和模糊搜索功能”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
