vue + element中常见简单模糊查询

*** @input 相当于 原生 中 oninput***

<template>
    <div  class="block">
      <el-input v-model="input" placeholder="请输入内容"  @input="flite(input)"></el-input>
      <el-table :data="table" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>
    </div>
</template>

<script>
export default  {
 data(){
  return {
   input: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王大虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "李虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "贾虎",
          address: "上海市普陀区金沙江路 1516 弄"
        },{
          date: "2016-05-03",
          name: "凡扬扬",
          address: "安徽省宿州市砀山县068乡道"
        }
      ],
      table: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王大虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "李虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "贾虎",
          address: "上海市普陀区金沙江路 1516 弄"
        },
         {
          date: "2016-05-03",
          name: "凡扬扬",
          address: "安徽省宿州市砀山县068乡道"
        }
      ],
  },
   methods:{
      flite(input) {
      let  that = this;
      //    filter  数组API    includes  字符串API  
      //  和数组中的 includes类似
     that.table = that.tableData.filter(Val => {
        if (
          Val.address.includes(that.input) ||
          Val.name.includes(that.input)
        ) {
          that.table.push(Val);
          return that.table;
        }
      });
    },
  }
 }
}

</script>