vue-elementui中表格搜索

在Vue-ElementUI中实现表格搜索的方法有多种。根据引用中的内容，你可以使用自定义的computed属性来实现表格搜索功能。具体步骤如下：

1. 首先，你需要在你的Vue组件中添加一个搜索框用于输入关键字。
2. 然后，你可以在computed属性中创建一个新的属性，例如"tables"，用于存储过滤后的数据。
3. 在"tables"属性的定义中，你可以使用filter()方法对"tableData"进行过滤，只保留那些包含搜索关键字的数据。
4. 在filter()方法中，你可以使用Object.keys()方法获取对象数组的所有枚举属性，然后使用some()方法进行匹配判断，只要有一个属性匹配成功，就返回整个对象。
5. 在匹配时，你可以将对象属性的值转换成小写，并使用indexOf()方法来判断是否包含搜索关键字。
6. 最后，根据搜索框中是否有值，来返回过滤后的数据或者全部数据。

下面是一个示例代码供你参考：

computed: {
  tables() {
    let search = this.search.toLowerCase();
    if (search) {
      return this.tableData.filter(data => {
        return Object.keys(data).some(key => {
          if (data[key !== null) {
            return data[key].toString().toLowerCase().indexOf(search) > -1;
          }
        });
      });
    } else {
      return this.tableData;
    }
  }
}

通过以上步骤，你就可以在Vue-ElementUI表格中实现搜索功能了。注意，其中的"tableData"是你需要展示在表格中的数据，"search"是搜索框中输入的关键字。你可以根据自己的实际情况进行调整。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue+element-ui的表格组件实现简单的搜索框功能](https://blog.csdn.net/kurodasense/article/details/122782200)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [vue-elementui-tree-table.rar](https://download.csdn.net/download/qq_32442967/12015371)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]