vue搜索过后实现分页
实现 Vue 搜索后分页的方法
数据绑定与搜索逻辑
在 Vue 组件中定义数据属性，包括原始数据列表、搜索关键词、分页相关参数：
data() {
return {
originalList: [], // 原始数据
filteredList: [], // 过滤后的数据
searchQuery: '', // 搜索关键词
currentPage: 1, // 当前页码
itemsPerPage: 10 // 每页显示数量
}
}计算属性处理过滤与分页
使用计算属性实现搜索过滤和分页逻辑：
computed: {
filteredItems() {
return this.originalList.filter(item => {
return item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
})
},
paginatedItems() {
const start = (this.currentPage - 1) * this.itemsPerPage
return this.filteredItems.slice(start, start + this.itemsPerPage)
},
totalPages() {
return Math.ceil(this.filteredItems.length / this.itemsPerPage)
}
}模板部分实现
在模板中绑定搜索输入和分页控件：
<template>
<div>
<input v-model="searchQuery" placeholder="搜索...">
<ul>
<li v-for="item in paginatedItems" :key="item.id">
{{ item.name }}
</li>
</ul>
<div class="pagination">
<button
@click="currentPage--"
:disabled="currentPage === 1">
上一页
</button>
<span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
<button
@click="currentPage++"
:disabled="currentPage >= totalPages">
下一页
</button>
</div>
</div>
</template>重置页码处理
当搜索条件变化时，需要重置当前页码到第一页：
watch: {
searchQuery() {
this.currentPage = 1
}
}样式优化
添加基础样式提升用户体验：
.pagination {
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}异步数据加载
如果数据需要从API获取，可以在created或mounted钩子中加载：
async created() {
const response = await fetch('/api/items')
this.originalList = await response.json()
}
