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 等组件库提供的表格组件。
<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="searchName" size="mini" placeholder="输入姓名搜索"/>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
searchName: '',
tableData: [{
date: '2023-01-01',
name: '王小虎'
}]
}
}
}
</script>多条件筛选
实现多条件筛选时，可以在计算属性中组合多个筛选条件。
computed: {
filteredItems() {
return this.items.filter(item => {
const matchesSearch = item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
const matchesAge = item.age >= this.minAge && item.age <= this.maxAge
return matchesSearch && matchesAge
})
}
}服务端筛选
对于大数据量，建议将筛选逻辑放在服务端，通过 API 请求获取筛选后的数据。
methods: {
async fetchFilteredData() {
const response = await axios.get('/api/items', {
params: {
search: this.searchQuery,
minAge: this.minAge,
maxAge: this.maxAge
}
})
this.items = response.data
}
}性能优化
对于大型数据集，可以使用防抖技术减少频繁筛选带来的性能问题。
import { debounce } from 'lodash'
export default {
methods: {
fetchFilteredData: debounce(function() {
// API 调用
}, 500)
}
}
