当前位置：首页 > VUE

vue实现搜索表格

2026-02-18 21:20:19VUE

Vue 实现搜索表格的方法

数据绑定与表格渲染

使用 Vue 的 v-for 指令渲染表格数据，绑定到 data 中的数组。例如：

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

搜索功能实现

在 Vue 实例的 data 中定义搜索关键词和原始数据：

data() {
  return {
    searchQuery: '',
    items: [
      { id: 1, name: 'Alice', age: 25 },
      { id: 2, name: 'Bob', age: 30 }
    ]
  }
}

计算属性过滤数据

通过计算属性实现实时搜索过滤：

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

输入框绑定搜索

在模板中添加搜索输入框，使用 v-model 双向绑定：

<input 
  type="text" 
  v-model="searchQuery" 
  placeholder="Search..."
>

样式优化（可选）

添加基础样式提升用户体验：

input {
  padding: 8px;
  margin-bottom: 16px;
  width: 100%;
  max-width: 400px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
td, th {
  padding: 8px;
  border: 1px solid #ddd;
}

高级功能扩展

对于大型数据集，可考虑：

添加防抖处理减少频繁计算
实现多列组合搜索
加入分页功能

示例防抖实现：

vue实现搜索表格

import _ from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      items: [...],
      debouncedFilter: null
    }
  },
  created() {
    this.debouncedFilter = _.debounce(this.updateFilter, 300)
  },
  methods: {
    updateFilter() {
      // 过滤逻辑
    }
  }
}