Vue前端实现多个条件表格搜索

---

操作实现效果

在vue文件中通过js代码完成多条件搜索符合条件的table数据，本文使用了element-ui组件创建表格。
效果如下图所示：

测试json数据

[
  {
    "test1":"",
    "test2":"",
    "test3":"",
    "test4":""
  }
  ...
  //这里只展示一条数据
]

搜索栏

    <el-form :inline="true">
      <el-form-item label="单据编号：">
        <el-input 
          v-model="inputData.test1" 
          placeholder="请输入" 
          style="width: 180px;">
        el-input>
      el-form-item>
      <el-form-item label="单据编号：">
        <el-input 
          v-model="inputData.test2" 
          placeholder="请输入" 
          style="width: 180px;">
        el-input>
      el-form-item>
      <el-form-item label="单据编号：">
        <el-input 
          v-model="inputData.test3" 
          placeholder="请输入" 
          style="width: 180px;">
        el-input>
      el-form-item>
      <el-form-item label="单据编号：">
        <el-input 
          v-model="inputData.test4" 
          placeholder="请输入" 
          style="width: 180px;">
        el-input>
      el-form-item>
    el-form>

条件过滤完成搜索

computed计算方法监视tables变量，filter条件过滤每一个需要搜索的变量，获得我们想要的数据。

代码如下：

    computed: {
      tables(){
        return testData.filter(item => { 
          const matches1 = this.inputData.test1==='' ? true : item.test1.includes(this.inputData.test1) ? true : false;
          const matches2 = this.inputData.test2==='' ? true : item.test2.includes(this.inputData.test2) ? true : false;
          const matches3 = this.inputData.test3==='' ? true : item.test3.includes(this.inputData.test3) ? true : false;
          const matches4 = this.inputData.test4==='' ? true : item.test4.includes(this.inputData.test4) ? true : false;
          return matches1 && matches2 && matches3 && matches4;
        });
      }
    }

表格栏

    <el-table 
      :data="tables" 
      style="width: 100%"
      height="400"
      :header-cell-style="{ background: '#00000008'}">
      <el-table-column 
        label="test1" 
        prop="test1">
      el-table-column>
      <el-table-column 
        label="test2" 
        prop="test2">
      el-table-column>
      <el-table-column 
        label="test3" 
        prop="test3">
      el-table-column>
      <el-table-column 
        label="test4" 
        prop="test4">
      el-table-column>
    el-table>

完整代码

<template>
  <div>
    <!-- 搜索栏 -->
    <el-form :inline="true">
      <el-form-item label="单据编号：">
        <el-input 
          v-model="inputData.test1" 
          placeholder="请输入" 
          style="width: 180px;">
        </el-input>
      </el-form-item>
      <el-form-item label="单据编号：">
        <el-input 
          v-model="inputData.test2" 
          placeholder="请输入" 
          style="width: 180px;">
        </el-input>
      </el-form-item>
      <el-form-item label="单据编号：">
        <el-input 
          v-model="inputData.test3" 
          placeholder="请输入" 
          style="width: 180px;">
        </el-input>
      </el-form-item>
      <el-form-item label="单据编号：">
        <el-input 
          v-model="inputData.test4" 
          placeholder="请输入" 
          style="width: 180px;">
        </el-input>
      </el-form-item>
    </el-form>
    <!-- 表格栏 -->
    <el-table 
      :data="tables" 
      style="width: 100%"
      height="400"
      :header-cell-style="{ background: '#00000008'}">
      <el-table-column 
        label="test1" 
        prop="test1">
      </el-table-column>
      <el-table-column 
        label="test2" 
        prop="test2">
      </el-table-column>
      <el-table-column 
        label="test3" 
        prop="test3">
      </el-table-column>
      <el-table-column 
        label="test4" 
        prop="test4">
      </el-table-column>
    </el-table>
    <div>
      当前数据数量：{{ tables.length }}条
    </div>
  </div>
</template>

<script>
import testData from './test.json'

  export default {
    name:"Test",
    data() {
      return {
        inputData: {
          test1:'',
          test2:'',
          test3:'',
          test4:''
        }
      };
    },
    computed: {
      tables(){
        return testData.filter(item => { 
          const matches1 = this.inputData.test1==='' ? true : item.test1.includes(this.inputData.test1) ? true : false;
          const matches2 = this.inputData.test2==='' ? true : item.test2.includes(this.inputData.test2) ? true : false;
          const matches3 = this.inputData.test3==='' ? true : item.test3.includes(this.inputData.test3) ? true : false;
          const matches4 = this.inputData.test4==='' ? true : item.test4.includes(this.inputData.test4) ? true : false;
          return matches1 && matches2 && matches3 && matches4;
        });
      }
    },
    methods: {

    }
  }
</script>

<style scoped>

</style>

如果数据量偏大，建议还是使用后端处理数据，本文仅是提供一种在前端实现搜索的方法，不推荐在实景使用
对于selection选择器搜索，将includes函数改为'==='即可
如果要使用按钮搜索，需要再创建一个中间数据，它会与tables有关，只有当点击按钮时，才会将输入的数据传给它