Vue filter+indexOf 实现input框模糊查询&多条件查询

代码：

    <div class="history-search">
        <span class="s-span">病历信息搜索 </span>
        <!-- 改变input框的值触发的事件 -->
        <el-input class="input-input" v-model="searchVal" @input="inputChange"
          ><i
            class="el-icon-search el-input__icon"
            slot="suffix"
          >
          </i>
        </el-input>
      </div>
      <div class="outer-table">
        <!-- 此父组件引用子组件tablemax -->
        <tablemax :label="myLabel" :tableData="myTableData">
          <template v-slot:table>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button @click="getUse(scope.row)" type="text" size="small"
                  >调用</el-button
                >
              </template>
            </el-table-column>
          </template>
        </tablemax>
      </div>

data() {
    return {
      myTableData: [
        {
          num: "1",
          content: "这是第一个病历内容",
          time: "2019-11-12 12:08:28",
          people: "妞妞",
        },
        {
          num: "2",
          content: "这是第二个病历内容",
          time: "2019-11-12 12:08:29",
          people: "小猪",
        },
        {
          num: "3",
          content: "这是第三个病历内容",
          time: "2019-11-12 12:08:20",
          people: "小熊",
        },
        {
          num: "4",
          content: "这是第四个病历内容",
          time: "2019-11-12 12:08:30",
          people: "小虎",
        }
      ],
      fakeData: [],
      searchVal: "",
    };
  }

//复制数组this.myTableData给this.fakeData
created() {
    for (let i = 0; i < this.myTableData.length; i++) {
      this.fakeData[i] = this.myTableData[i];
    }
  },

methods: {
    //搜索病历信息
    //每次改变input框值时就改变this.myTableData的值
    inputChange() { //循环每一项 只要content的值含有输入的searchVal值，就加进newList；反之，就无东西加进newList
      let newlist = this.fakeData.filter(
        (item) => item.content.indexOf(this.searchVal) > -1
      );
      this.myTableData = newlist;
    }
  }
  

效果如图：

补充——若是多条件查询，假设改变数组中content值时也要保持筛选当前的num和people值。代码如下：

changeContent() {
      let newlist = this.fakeData.filter((item) => {
        return (
          item.num.indexOf(this.num) > -1 &&
          item.content.indexOf(this.content) > -1 &&
          item.people.indexOf(this.people) > -1
        );
      });
      this.myTableData = newlist;
}