在Vue.js中实现el-table的搜索与过滤功能

在Vue中使用el-table（Element UI库中的表格组件）实现列表搜索功能，并且完全在前端完成，你可以按照以下步骤进行：

设置搜索输入框：在el-table上方添加一个或多个搜索输入框，用于用户输入搜索关键词。
绑定搜索关键词：使用Vue的数据绑定特性，将搜索输入框的值绑定到组件的data属性中。
过滤数据：根据用户输入的搜索关键词，实时过滤el-table的数据源。
更新表格：每当搜索关键词变化时，更新el-table的数据源以显示匹配的结果。

以下是一个简单的示例代码，展示了如何在Vue组件中实现这些步骤：

<template>  
  <div>  
    <!-- 搜索输入框 -->  
    <el-input v-model="searchQuery" placeholder="请输入搜索关键词" @input="handleSearch"></el-input>  
  
    <!-- 表格 -->  
    <el-table :data="filteredData" style="width: 100%">  
      <el-table-column prop="date" label="日期" width="180"></el-table-column>  
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>  
      <el-table-column prop="address" label="地址"></el-table-column>  
    </el-table>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      // 原始数据  
      tableData: [  
        {  
          date: '2016-05-02',  
          name: '王小虎',  
          address: '上海市普陀区金沙江路 1518 弄'  
        },  
        {  
          date: '2016-05-04',  
          name: '王小虎',  
          address: '上海市徐汇区漕溪北路 1518 号'  
        },  
        // ... 其他数据  
      ],  
      // 搜索关键词  
      searchQuery: ''  
    };  
  },  
  computed: {  
    // 计算属性：过滤后的数据  
    filteredData() {  
      if (!this.searchQuery) {  
        return this.tableData;  
      } else {  
        return this.tableData.filter(row => {  
          return Object.values(row).some(value =>  
            String(value).toLowerCase().includes(this.searchQuery.toLowerCase())  
          );  
        });  
      }  
    }  
  },  
  methods: {  
    // 处理搜索输入事件（虽然在这个例子中不是必需的，因为我们已经使用了计算属性）  
    handleSearch() {  
      // 可以在这里添加额外的搜索逻辑，如果需要的话  
      console.log('搜索关键词：', this.searchQuery);  
    }  
  }  
};  
</script>  
  
<style scoped>  
/* 样式可以根据需要进行调整 */  
</style>

解释：

模板部分：
- 使用el-input作为搜索输入框，并绑定到searchQuery数据属性。
- 使用el-table显示数据，并绑定到filteredData计算属性。
脚本部分：
- data函数返回组件的初始数据，包括tableData（原始数据）和searchQuery（搜索关键词）。
- computed属性filteredData根据searchQuery实时过滤tableData。这里使用了Array.prototype.filter方法和Object.values来检查每行数据的每个值是否包含搜索关键词（不区分大小写）。
- methods部分包含handleSearch方法，虽然在这个例子中它只用于打印搜索关键词，但你可以在这里添加额外的搜索逻辑（例如，去抖动处理以减少搜索时的性能开销）。
样式部分：
- 使用scoped样式以确保样式只应用于当前组件。