vue 多条件和模糊查询（已测试）

    


      
        请选择
        男
        女
        不是人
      

      

      

      提交数据
    
    

      

        

          {{item.name}} || {{item.phone}} || {{item.sex | filterSex}}
        
      
    
  

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;
      });
    },
  },
};

已在本地用上面的类似方法测试过，没有问题！