vue实现表格筛选
实现表格筛选的基本思路
在Vue中实现表格筛选通常涉及以下几个核心步骤：数据绑定、筛选逻辑处理、动态渲染。以下是具体实现方法：
数据准备与表格渲染
定义表格数据和表头结构，使用v-for循环渲染表格内容：
<template>
<div>
<input v-model="searchText" placeholder="输入筛选条件"/>
<table>
<thead>
<tr>
<th v-for="col in columns" :key="col.key">{{ col.title }}</th>
</tr>
</thead>
<tbody>
<tr v-for="item in filteredData" :key="item.id">
<td v-for="col in columns" :key="col.key">{{ item[col.key] }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
searchText: '',
columns: [
{ key: 'name', title: '姓名' },
{ key: 'age', title: '年龄' },
{ key: 'address', title: '地址' }
],
tableData: [
{ id: 1, name: '张三', age: 25, address: '北京' },
{ id: 2, name: '李四', age: 30, address: '上海' }
]
}
}
}
</script>计算属性实现筛选逻辑
通过计算属性动态返回筛选后的数据：
computed: {
filteredData() {
const search = this.searchText.toLowerCase()
return this.tableData.filter(item =>
Object.values(item).some(
val => String(val).toLowerCase().includes(search)
)
)
}
}多条件筛选实现
对于多字段独立筛选的情况，可以扩展为多个输入框：
<input v-model="filters.name" placeholder="姓名筛选"/>
<input v-model="filters.age" placeholder="年龄筛选"/>data() {
return {
filters: {
name: '',
age: ''
}
}
},
computed: {
filteredData() {
return this.tableData.filter(item => {
return (
(!this.filters.name || item.name.includes(this.filters.name)) &&
(!this.filters.age || item.age == this.filters.age)
)
})
}
}使用第三方组件库
对于复杂需求，可以使用现成的表格组件库如Element UI或Ant Design Vue：
<template>
<el-table :data="filteredData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>性能优化建议
对于大数据量的表格，建议：
- 添加防抖处理输入变化
- 实现分页加载
- 考虑虚拟滚动技术
- 对不可见数据进行懒加载
methods: {
debounceFilter: _.debounce(function() {
this.filterData()
}, 300)
}
