vue实现表格数据筛选

实现表格数据筛选的基本思路

在Vue中实现表格数据筛选通常涉及以下几个核心步骤：监听用户输入、过滤数据源、动态渲染表格。以下是具体实现方法：

使用计算属性过滤数据

计算属性是Vue中处理数据筛选的理想选择，它会自动缓存结果，只在依赖项变化时重新计算：

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

<script>
export default {
  data() {
    return {
      searchText: '',
      originalData: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 }
      ]
    }
  },
  computed: {
    filteredData() {
      return this.originalData.filter(item => 
        item.name.includes(this.searchText)
      )
    }
  }
}
</script>

多条件筛选实现

对于更复杂的筛选需求，可以扩展过滤逻辑：

computed: {
  filteredData() {
    return this.originalData.filter(item => {
      const nameMatch = item.name.toLowerCase().includes(this.searchText.toLowerCase())
      const ageMatch = item.age.toString().includes(this.ageFilter)
      return nameMatch && ageMatch
    })
  }
}

使用第三方表格组件

对于功能丰富的表格筛选，可以考虑使用专门的表格组件库：

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

服务器端筛选处理

当数据量很大时，应该将筛选逻辑放在服务器端：

methods: {
  async fetchFilteredData() {
    const res = await axios.get('/api/data', {
      params: {
        search: this.searchText,
        page: this.currentPage
      }
    })
    this.tableData = res.data
  }
},
watch: {
  searchText() {
    this.fetchFilteredData()
  }
}

性能优化建议

对于本地大数据量筛选，可以考虑以下优化措施：

• 使用防抖处理频繁的输入事件
• 对数据进行分页处理
• 使用Web Worker进行后台筛选
• 对不变的数据使用Object.freeze()避免响应式开销

created() {
  this.debouncedFilter = _.debounce(this.applyFilter, 300)
},
methods: {
  applyFilter() {
    // 实际的筛选逻辑
  }
}

以上方法可以根据具体需求组合使用，构建出高效灵活的表格筛选功能。