vxe-table 全表搜索

vxe-table 是 Vue 电商平台Vuetify Enterprise Edition (VXE) 的表格组件，它提供了强大的功能，包括全表搜索。全表搜索是指用户可以在输入框中输入关键词，vxe-table 会实时匹配并高亮显示所有列中包含该关键词的数据行，方便快速定位信息。

在vxe-table中实现全表搜索通常需要以下几个步骤：

1. 安装Vuetify和VueX：确保已经安装了相关的依赖，并在项目中配置好状态管理库VueX用于存储搜索关键字等数据。

2. 使用`filter-method`属性：这是关键属性，用于自定义搜索逻辑，函数接收当前行的数据、索引以及搜索关键字作为参数。

<vxe-table :columns="columns" :data="tableData" filter-method="searchMethod">
  <!-- ... -->
</vxe-table>

3. 在JS中编写`searchMethod`函数：

methods: {
  searchMethod(row, index, keyword) {
    // 搜索逻辑，遍历row的所有列，检查是否包含keyword
    let match = Object.values(row).some(value => value.toString().includes(keyword));
    return match;
  }
},
state: {
  searchKeyword: '', // 在VueX的状态中存储搜索关键字
},
computed: {
  filteredTableData() {
    // 当搜索关键字改变时，更新表格数据
    return this.tableData.filter(row => this.searchMethod(row, undefined, this.searchKeyword));
  }
}

4. 更新搜索：当用户输入新内容，通过Vue的响应式特性，可以监听`searchKeyword`的变化，并触发`filteredTableData`的计算。