当前位置：首页 > VUE

vue实现表格搜索

2026-01-17 11:49:07VUE

实现表格搜索功能

在Vue中实现表格搜索功能，可以通过以下步骤完成：

数据绑定与搜索输入框

创建一个输入框用于接收用户输入的搜索关键词，使用v-model实现双向绑定。

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索...">
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>邮箱</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in filteredItems" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.email }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

计算属性实现过滤逻辑

使用计算属性根据搜索关键词过滤表格数据，返回匹配的结果。

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: '张三', age: 25, email: 'zhangsan@example.com' },
        { id: 2, name: '李四', age: 30, email: 'lisi@example.com' },
        { id: 3, name: '王五', age: 28, email: 'wangwu@example.com' }
      ]
    }
  },
  computed: {
    filteredItems() {
      const query = this.searchQuery.toLowerCase()
      return this.items.filter(item => {
        return (
          item.name.toLowerCase().includes(query) ||
          item.email.toLowerCase().includes(query) ||
          item.age.toString().includes(query)
        )
      })
    }
  }
}
</script>

多字段搜索优化

为了提升搜索体验，可以对搜索逻辑进行优化，支持模糊搜索和多个字段同时匹配。

filteredItems() {
  if (!this.searchQuery) return this.items
  const query = this.searchQuery.toLowerCase()
  return this.items.filter(item => {
    return Object.values(item).some(
      value => String(value).toLowerCase().includes(query)
    )
  })
}

添加防抖优化性能

对于大型数据集，可以使用防抖函数减少频繁触发搜索带来的性能问题。

import { debounce } from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      debouncedSearch: null
    }
  },
  created() {
    this.debouncedSearch = debounce(this.doSearch, 300)
  },
  methods: {
    doSearch() {
      // 执行搜索逻辑
    }
  },
  watch: {
    searchQuery() {
      this.debouncedSearch()
    }
  }
}

添加无结果提示

当搜索结果为空时，显示友好的提示信息。

<tbody>
  <tr v-if="filteredItems.length === 0">
    <td colspan="3" class="no-results">没有找到匹配的结果</td>
  </tr>
  <tr v-else v-for="item in filteredItems" :key="item.id">
    <!-- 表格内容 -->
  </tr>
</tbody>

样式优化

为搜索框和表格添加基本样式，提升用户体验。

<style>
input {
  padding: 8px;
  margin-bottom: 16px;
  width: 300px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
}
th {
  background-color: #f2f2f2;
}
.no-results {
  text-align: center;
  color: #999;
}
</style>

以上实现方案可以根据实际需求进行调整，例如添加分页功能、支持高级搜索条件等。对于更复杂的场景，可以考虑使用专门的表格组件库如Element UI或Ant Design Vue提供的表格组件。

vue实现表格搜索