vue实现表格搜索

Vue实现表格搜索功能

在Vue中实现表格搜索功能可以通过多种方式完成，以下介绍两种常见方法：基于计算属性和使用第三方库。

方法一：使用计算属性实现搜索

<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.city }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: '张三', age: 25, city: '北京' },
        { id: 2, name: '李四', age: 30, city: '上海' },
        { id: 3, name: '王五', age: 28, city: '广州' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        return (
          item.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
          item.city.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
          item.age.toString().includes(this.searchQuery)
        )
      })
    }
  }
}
</script>

方法二：使用Lodash实现防抖搜索

对于大数据量表格，可以使用Lodash的debounce函数优化性能。

import { debounce } from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      items: [], // 原始数据
      filteredItems: [] // 过滤后的数据
    }
  },
  created() {
    this.debouncedFilter = debounce(this.filterItems, 300)
  },
  watch: {
    searchQuery(newVal) {
      this.debouncedFilter(newVal)
    }
  },
  methods: {
    filterItems(query) {
      this.filteredItems = this.items.filter(item => {
        return (
          item.name.toLowerCase().includes(query.toLowerCase()) ||
          item.description.toLowerCase().includes(query.toLowerCase())
        )
      })
    }
  }
}

方法三：使用Element UI表格搜索

如果使用Element UI组件库，可以结合其表格组件实现更丰富的搜索功能。

<template>
  <div>
    <el-input v-model="searchQuery" placeholder="请输入搜索内容" clearable></el-input>
    <el-table :data="filteredItems" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="city" label="城市"></el-table-column>
    </el-table>
  </div>
</template>

方法四：服务端搜索实现

对于大数据量，建议使用服务端搜索：

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

方法五：多条件高级搜索

实现包含多个搜索条件的复杂搜索功能：

<template>
  <div>
    <div class="search-form">
      <el-input v-model="searchParams.name" placeholder="姓名"></el-input>
      <el-input v-model="searchParams.city" placeholder="城市"></el-input>
      <el-select v-model="searchParams.ageRange" placeholder="年龄范围">
        <el-option label="20-30" value="20-30"></el-option>
        <el-option label="30-40" value="30-40"></el-option>
      </el-select>
      <el-button @click="handleSearch">搜索</el-button>
    </div>
    <!-- 表格内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchParams: {
        name: '',
        city: '',
        ageRange: ''
      }
    }
  },
  methods: {
    handleSearch() {
      // 根据searchParams过滤数据或调用API
    }
  }
}
</script>

以上方法可根据项目需求选择或组合使用，对于简单需求使用方法一即可，复杂场景可考虑服务端搜索或高级搜索功能。