element plus表格上面搜索框并且有查询按钮，前端实现表格数据的模糊查询使用vue3

要实现 Element Plus 表格上方带有搜索框和查询按钮的模糊查询，你可以按照以下步骤进行操作：

1. 在模板中添加搜索框和查询按钮：

<template>
  <div>
    <el-input v-model="searchText" placeholder="请输入关键字"></el-input>
    <el-button type="primary" @click="handleSearch">查询</el-button>
    <el-table :data="tableData">
      <!-- 表格列的定义 -->
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <!-- 其他列的定义 -->
    </el-table>
  </div>
</template>

2. 在 `data` 函数中添加搜索框的绑定值和表格数据：

data() {
  return {
    searchText: '', // 搜索框的绑定值
    tableData: [
      { name: '张三', age: 20 },
      { name: '李四', age: 25 },
      { name: '王五', age: 30 },
      // 其他数据
    ],
  };
},

3. 在 `methods` 中添加 `handleSearch` 方法来处理查询操作：

methods: {
  handleSearch() {
    const searchText = this.searchText.trim(); // 获取搜索框中的关键字
    if (!searchText) {
      // 如果关键字为空，则显示全部数据
      this.filteredData = this.tableData;
      return;
    }
    // 使用过滤方法过滤数据
    this.filteredData = this.tableData.filter(item => {
      return Object.values(item).some(value => {
        return String(value).includes(searchText);
      });
    });
  },
},

在这里，我们定义了一个 `handleSearch` 方法来处理查询操作。在方法中，我们首先获取搜索框中的关键字，并使用 `trim` 方法去除两端空格。如果关键字为空，则显示全部数据；否则，我们使用 `filter` 方法对表格数据进行过滤。过滤的方法为：对每个对象的所有属性值进行检查，如果任何一个属性值包含了关键字，则返回 `true`，否则返回 `false`。

4. 在表格组件中使用过滤后的数据：

<el-table :data="filteredData || tableData">
  <!-- 表格列的定义 -->
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <!-- 其他列的定义 -->
</el-table>

在这里，我们使用 `filteredData` 来作为表格的数据源，如果 `filteredData` 为空，则使用原始的 `tableData`。这样可以保证在没有进行查询操作时，表格显示全部的数据。