vue-表格多个条件搜索筛选功能实现（模糊搜索）

1. 在mounted中深拷贝一份数据

this.copyArr = JSON.parse(JSON.stringify(this.arr))

2. 将要搜索的条件做成对象格式

const vtw = {
  name:this.input1,
  age:this.input2,
  height:this.input3,
}

3. 利用filter筛选方法，在筛选方法里用every方法进行多条件判断，因为是模糊搜索所以用了.includes方法，精准搜索可以将.includes改为==

const arr1 = this.copyArr.filter((item)=>{
  return Object.values(vtw).every((key,index)=>{
    console.log('key1',key);
    return item[Object.keys(vtw)[index]].includes(key)
  })
})

4. 最后将filter返回的数组替换data中的arr数组即可：this.arr = arr1

完整代码如下：

<template>
  <div>
    <div style="margin-top:50px">
      <span>条件一(姓名)：</span>
      <el-input
      style="width:200px;display:inline-block;margin-right:20px"
        placeholder="请输入内容"
        v-model="input1"
        clearable>
      </el-input>
      <span>条件二(年龄)：</span>
      <el-input
      style="width:200px;display:inline-block;margin-right:20px"
        placeholder="请输入内容"
        v-model="input2"
        clearable>
      </el-input>
      <span>条件三(身高)：</span>
      <el-input
      style="width:200px;display:inline-block;margin-right:20px"
        placeholder="请输入内容"
        v-model="input3"
        clearable>
      </el-input>
      <el-button type="primary" @click="moreSearch()">查询</el-button>
    </div>
    <div class="tableClass">
      <el-table
        :data="arr"
        style="width: 100%">
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="age"
          label="年龄"
          width="180">
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          width="180">
        </el-table-column>
        <el-table-column
          prop="height"
          label="身高"
          width="180">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>


<script>
export default {
  data(){
    return {
      input1: '',
      input2: '',
      input3: '',
      arr:[
        {
          name:'小明',
          age:'16',
          sex:'男',
          height:'156cm'
        },
        {
          name:'小红',
          age:'15',
          sex:'女',
          height:'150cm'
        },
        {
          name:'小米',
          age:'17',
          sex:'男',
          height:'168cm'
        },
        {
          name:'小刚',
          age:'16',
          sex:'男',
          height:'165cm'
        },
        {
          name:'小芳',
          age:'18',
          sex:'女',
          height:'170cm'
        },
      ],
      copyArr:[]
    }
  },
  mounted(){
    this.copyArr = JSON.parse(JSON.stringify(this.arr))
  },
  methods:{
    moreSearch(){
      const vtw = {
        name:this.input1,
        age:this.input2,
        height:this.input3,
      }
      const arr1 = this.copyArr.filter((item)=>{
        return Object.values(vtw).every((key,index)=>{
          console.log('key1',key);
          return item[Object.keys(vtw)[index]].includes(key)
        })
      })
      this.arr = arr1
    }
  }
}
</script>


<style lang="less" scoped>
  .tableClass{
    border: 1px solid #c00;
    margin-top: 50px;
  }
</style>