vue实现表格筛选

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 }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

使用第三方表格组件

对于复杂表格需求，可以使用Element UI、Ant Design Vue等UI库提供的表格组件，它们内置了筛选功能。

以Element UI为例：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
      <template #header>
        <el-input v-model="filters.date" size="mini" placeholder="筛选日期"/>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
      <template #header>
        <el-input v-model="filters.name" size="mini" placeholder="筛选姓名"/>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [...],
      filters: {
        date: '',
        name: ''
      }
    }
  },
  computed: {
    filteredData() {
      return this.tableData.filter(item => 
        (!this.filters.date || item.date.includes(this.filters.date)) &&
        (!this.filters.name || item.name.includes(this.filters.name))
      )
    }
  }
}
</script>

多条件复杂筛选

对于需要多条件组合筛选的场景，可以构建更复杂的筛选逻辑：

computed: {
  filteredItems() {
    let result = this.items
    if (this.searchQuery) {
      result = result.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
        item.description.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
    if (this.selectedCategory) {
      result = result.filter(item => item.category === this.selectedCategory)
    }
    if (this.priceRange) {
      result = result.filter(item => 
        item.price >= this.priceRange[0] && 
        item.price <= this.priceRange[1]
      )
    }
    return result
  }
}

服务端筛选

对于大数据量场景，建议将筛选逻辑放在服务端：

methods: {
  async fetchFilteredData() {
    const params = {
      search: this.searchQuery,
      category: this.selectedCategory,
      minPrice: this.minPrice,
      maxPrice: this.maxPrice
    }
    const { data } = await axios.get('/api/items', { params })
    this.items = data
  }
}

性能优化技巧

对于前端大数据量筛选，可以使用防抖技术减少频繁计算：

import { debounce } from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      items: [...],
      debouncedFilter: null
    }
  },
  created() {
    this.debouncedFilter = debounce(this.applyFilter, 300)
  },
  methods: {
    applyFilter() {
      // 筛选逻辑
    }
  },
  watch: {
    searchQuery() {
      this.debouncedFilter()
    }
  }
}