vue3 实现el-table 表格的搜索功能

要实现 `el-table` 表格的搜索功能，可以借助 `el-input` 和 `filter-method` 属性来实现。

首先，在 `el-table` 中添加一个 `el-input` 组件，用于输入搜索关键字，如下所示：

<template>
  <div>
    <el-input v-model="searchText" placeholder="请输入搜索关键字"></el-input>
    <el-table :data="tableData" :columns="columns" :filter-method="handleFilter">
    </el-table>
  </div>
</template>

然后，在 `el-table` 中添加 `filter-method` 属性，用于过滤数据，如下所示：

<template>
  <div>
    <el-input v-model="searchText" placeholder="请输入搜索关键字"></el-input>
    <el-table :data="tableData" :columns="columns" :filter-method="handleFilter">
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      tableData: [
        { name: '张三', age: 18, address: '北京市海淀区' },
        { name: '李四', age: 20, address: '上海市浦东新区' },
        { name: '王五', age: 22, address: '广州市天河区' },
        { name: '赵六', age: 24, address: '深圳市南山区' }
      ],
      columns: [
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' },
        { prop: 'address', label: '地址' }
      ]
    }
  },
  methods: {
    handleFilter(value, row, column) {
      const property = column['property'];
      return row[property].indexOf(value) !== -1;
    }
  }
}
</script>

在 `handleFilter` 方法中，通过 `value` 参数获取输入的搜索关键字，通过 `row` 参数获取当前行的数据，通过 `column` 参数获取当前列的属性值，然后使用 JavaScript 的 `indexOf` 方法判断当前列的属性值是否包含搜索关键字，如果包含则返回 `true`，否则返回 `false`。

最后，将过滤后的数据传入 `el-table` 组件中即可实现搜索功能。