vxe-table+filter

VxeTable是一个基于Vue.js的高性能表格组件库，它提供了一套完整的表格解决方案，包括列分组、排序、合并单元格、过滤等功能。Filter是指VxeTable中的数据过滤功能，允许用户输入关键词，只显示包含该关键词的数据行。使用`v-model`绑定搜索框的值，并配置相应的filter-method函数，可以定制过滤逻辑。例如：

<template>
  <vxe-table :data="tableData" @search="handleSearch">
    <vxe-column field="name" label="姓名"></vxe-column>
    <!-- ... -->
    <vxe-filter slot-scope="{ $column, filterValue }" :field="column.field" :value="filterValue"></vxe-filter>
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 表格数据
      ],
      searchValue: '',
    };
  },
  methods: {
    handleSearch(value) {
      this.tableData = this.tableData.filter(item => item.name.includes(value));
    }
  }
};
</script>

在这个例子中，当用户在搜索框中输入内容，`handleSearch`方法会被触发，对`tableData`数组进行过滤，只展示出包含输入关键字的记录。