vue实现的表格搜索

Vue 实现表格搜索功能

基础实现方法

数据绑定与搜索输入 在 Vue 中创建一个响应式的搜索输入框，绑定到 data 中的 searchQuery 属性：

<input v-model="searchQuery" placeholder="搜索..." />

表格数据过滤 使用 computed 属性对表格数据进行实时过滤：

computed: {
  filteredItems() {
    return this.items.filter(item => 
      item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    );
  }
}

表格渲染 在模板中使用 filteredItems 代替原始数据：

<tr v-for="item in filteredItems" :key="item.id">
  <td>{{ item.name }}</td>
  <td>{{ item.age }}</td>
</tr>

多字段搜索实现

扩展搜索功能 修改过滤逻辑以支持多字段搜索：

computed: {
  filteredItems() {
    const query = this.searchQuery.toLowerCase();
    return this.items.filter(item => 
      item.name.toLowerCase().includes(query) ||
      item.email.toLowerCase().includes(query) ||
      item.department.toLowerCase().includes(query)
    );
  }
}

高级搜索实现

分页集成 当搜索结果需要分页时，可以结合分页组件：

computed: {
  paginatedItems() {
    const start = (this.currentPage - 1) * this.itemsPerPage;
    return this.filteredItems.slice(start, start + this.itemsPerPage);
  },
  totalPages() {
    return Math.ceil(this.filteredItems.length / this.itemsPerPage);
  }
}

延迟搜索优化 对于大数据量，可以使用防抖技术减少计算频率：

data() {
  return {
    searchQuery: '',
    debouncedSearch: ''
  };
},
created() {
  this.debounceSearch = _.debounce(() => {
    this.debouncedSearch = this.searchQuery;
  }, 300);
},
watch: {
  searchQuery() {
    this.debounceSearch();
  }
}

服务器端搜索

API 请求实现 对于大量数据，建议使用服务器端搜索：

methods: {
  searchItems() {
    axios.get('/api/items', {
      params: {
        search: this.searchQuery
      }
    }).then(response => {
      this.items = response.data;
    });
  }
}

搜索触发方式 可以监听搜索输入变化或添加搜索按钮：

<input v-model="searchQuery" @input="searchItems" />
<!-- 或 -->
<button @click="searchItems">搜索</button>

UI 增强

加载状态显示 在等待搜索结果时显示加载状态：

data() {
  return {
    isLoading: false
  };
},
methods: {
  async searchItems() {
    this.isLoading = true;
    try {
      const response = await axios.get('/api/items', {
        params: { search: this.searchQuery }
      });
      this.items = response.data;
    } finally {
      this.isLoading = false;
    }
  }
}

空结果提示 当没有搜索结果时显示提示信息：

<tr v-if="filteredItems.length === 0">
  <td colspan="100%">没有找到匹配的结果</td>
</tr>