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

要实现 `el-table` 表格和 `el-input` 的搜索功能，可以借助 `computed` 计算属性和 `watch` 监听器来实现。

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

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

然后，在 `data` 中定义 `searchText` 和 `tableData`，分别表示搜索关键字和表格数据，如下所示：

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: '地址' }
    ]
  }
}

接着，在 `computed` 中定义 `filteredData` 计算属性，用于过滤数据，如下所示：

computed: {
  filteredData() {
    const searchText = this.searchText.trim().toLowerCase();
    if (searchText) {
      return this.tableData.filter((row) => {
        return Object.keys(row).some((key) => {
          return String(row[key]).toLowerCase().indexOf(searchText) > -1;
        });
      });
    } else {
      return this.tableData;
    }
  }
}

在 `filteredData` 计算属性中，使用 `trim` 方法去除搜索关键字的前后空格，使用 `toLowerCase` 方法将搜索关键字转换为小写字母，然后使用 `filter` 方法过滤表格数据，使用 `Object.keys` 方法获取每一行数据的所有属性名，使用 `some` 方法判断每一行数据的属性值是否包含搜索关键字，如果包含则返回 `true`，否则返回 `false`。

最后，在 `watch` 中监听 `searchText` 的变化，实时更新过滤后的数据，如下所示：

watch: {
  searchText() {
    this.$nextTick(() => {
      this.$refs.table.doLayout();
    });
  }
}

在 `watch` 中，使用 `$nextTick` 方法等待 DOM 更新后，再调用 `doLayout` 方法实时更新过滤后的数据。

通过以上步骤，即可实现 `el-table` 表格和 `el-input` 的搜索功能。