vue如何实现表格查询
Vue 实现表格查询的方法
使用计算属性过滤数据
在 Vue 中可以通过计算属性对表格数据进行过滤，实现查询功能。定义一个计算属性，根据输入的关键字返回过滤后的数据列表。
<template>
<div>
<input v-model="searchQuery" placeholder="Search...">
<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: 'John', age: 25 },
{ id: 2, name: 'Jane', 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="Date" width="180"></el-table-column>
<el-table-column prop="name" label="Name" width="180"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
<el-input v-model="searchInput" placeholder="Search name"></el-input>
</template>
<script>
export default {
data() {
return {
searchInput: '',
tableData: [/* your data */]
}
},
computed: {
filteredTableData() {
return this.tableData.filter(data =>
data.name.includes(this.searchInput)
)
}
}
}
</script>后端分页查询
当数据量很大时，建议将查询逻辑放到后端，前端只发送查询参数并接收返回结果。
methods: {
async searchTable() {
const params = {
keyword: this.searchKeyword,
page: this.currentPage
}
const res = await axios.get('/api/items', { params })
this.tableData = res.data
}
}多条件查询
实现多条件查询可以扩展过滤逻辑，组合多个查询条件。
computed: {
filteredItems() {
return this.items.filter(item => {
const nameMatch = item.name.toLowerCase().includes(this.nameQuery.toLowerCase())
const ageMatch = item.age.toString().includes(this.ageQuery)
return nameMatch && ageMatch
})
}
}使用 Lodash 进行防抖查询
对于频繁触发的查询输入，可以使用 Lodash 的防抖函数优化性能。
import { debounce } from 'lodash'
methods: {
search: debounce(function() {
// your search logic
}, 500)
}
