vue 使用 el-table 添加搜索框 实现简单搜索功能

要在 Vue 中使用 `el-table` 添加搜索框并实现简单搜索功能，你可以按照以下步骤进行操作：

1. 首先，确保你已经安装并引入了 Element UI 库，以便使用 `el-table` 和其他组件。
2. 在 Vue 组件中，定义一个数据属性 `searchText` 用于存储搜索框中的文本输入。
3. 在 `el-table` 中的表头部分，添加一个额外的列用于放置搜索框组件。
4. 在搜索框组件中，使用 `v-model` 绑定 `searchText` 属性，以便实时获取搜索框中的文本输入。
5. 在表格的数据源中，使用计算属性或方法来过滤符合搜索条件的数据。
6. 在搜索框的事件处理程序中，调用过滤数据的方法或更新计算属性，以实现数据的动态过滤。

下面是一个示例代码，演示了如何在 Vue 中添加搜索框并实现简单搜索功能：

<template>
  <div>
    <el-input v-model="searchText" placeholder="输入关键字搜索"></el-input>
    <el-table :data="filteredData">
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="邮箱" prop="email"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      tableData: [
        { name: '张三', age: 25, email: 'zhangsan@example.com' },
        { name: '李四', age: 30, email: 'lisi@example.com' },
        { name: '王五', age: 28, email: 'wangwu@example.com' }
      ]
    };
  },
  computed: {
    filteredData() {
      if (!this.searchText) {
        return this.tableData;
      }
      const searchText = this.searchText.toLowerCase();
      return this.tableData.filter(item => {
        return (
          item.name.toLowerCase().includes(searchText) ||
          item.email.toLowerCase().includes(searchText)
        );
      });
    }
  }
};
</script>

在上述代码中，我们在 `el-input` 组件中使用 `v-model` 绑定了 `searchText` 属性，用于实时获取搜索框中的文本输入。然后，我们在 `el-table` 的表头部分添加了一个额外的列，用于放置搜索框组件。

在数据源中，我们使用了一个名为 `tableData` 的数组来存储表格的数据。我们使用计算属性 `filteredData` 来过滤符合搜索条件的数据。如果 `searchText` 为空，则返回所有数据；否则，我们将搜索框中的文本转换为小写并与每一项的姓名和邮箱进行比较，返回包含搜索文本的数据项。

这样，当你在搜索框中输入关键字时，表格将根据输入进行动态过滤，并只显示符合条件的数据项。

请注意，在实际项目中，你可能需要从后端获取数据并进行搜索，这里的示例代码只是一个简单的演示。你可以根据自己的需求进行修改和扩展。