前端使用filter实现关键词查询

如下图所示，期望实现关键词查询

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="Date" prop="date"> </el-table-column>
    <el-table-column label="Name" prop="name"> </el-table-column>
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
      </template>
      <template #default="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >Edit</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

给绑定值添加filter属性，由于需要动态改变，此处需要用到computed属性

<script lang="ts">
import { Options, Vue } from "vue-class-component";
@Options({
  components: {},
   computed: {
    tableData() {
      return this.table.filter(
        (data: any) =>
        !this.search ||
        data.name.toLowerCase().includes(this.search.toLowerCase()) ||
        data.date.toLowerCase().includes(this.search.toLowerCase()) ||
        data.address.toLowerCase().includes(this.search.toLowerCase())
      );
    },
    tableDataTwo() {
      return this.table.filter(
        array => array.name.match(this.search) ||
        array.date.match(this.search) ||
        array.address.match(this.search)
      );
    }
  }
  }
})
export default class Table extends Vue {
  public table: any = [
    {
      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 弄",
    },
  ];
  public search = "";
}
</script>