当前位置：首页 > VUE

vue实现表格搜索

2026-03-30 05:01:23VUE

实现表格搜索功能

在Vue中实现表格搜索功能可以通过以下方法完成：

数据绑定与搜索输入 创建Vue实例并绑定表格数据，添加搜索输入框：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索...">
    <table>
      <tr v-for="item in filteredItems" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 }
      ]
    }
  }
}
</script>

计算属性过滤数据 使用计算属性实现实时搜索过滤：

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

多字段搜索优化 对于多字段搜索可以扩展过滤逻辑：

filteredItems() {
  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'

methods: {
  debouncedSearch: debounce(function() {
    this.filteredItems = this.items.filter(item => {
      return item.name.includes(this.searchQuery)
    })
  }, 300)
}

服务端搜索实现 对于大量数据可以考虑服务端搜索：

vue实现表格搜索

methods: {
  async searchItems() {
    const response = await axios.get('/api/items', {
      params: { search: this.searchQuery }
    })
    this.items = response.data
  }
}