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() {
// 实际的筛选逻辑
}
}以上方法可以根据具体需求组合使用，构建出高效灵活的表格筛选功能。
