vue前端实现分页查询
实现分页查询的基本思路
Vue前端实现分页查询通常需要结合后端API，通过传递页码(page)和每页条数(pageSize)参数获取分页数据。前端需要处理页码切换、数据渲染和分页器交互逻辑。
核心代码结构
<template>
<div>
<table>
<tr v-for="item in tableData" :key="item.id">
<!-- 表格内容渲染 -->
</tr>
</table>
<div class="pagination">
<button @click="prevPage" :disabled="currentPage === 1">上一页</button>
<span>{{ currentPage }} / {{ totalPage }}</span>
<button @click="nextPage" :disabled="currentPage === totalPage">下一页</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [], // 当前页数据
currentPage: 1, // 当前页码
pageSize: 10, // 每页条数
total: 0 // 总数据量
}
},
computed: {
totalPage() {
return Math.ceil(this.total / this.pageSize)
}
},
methods: {
fetchData() {
const params = {
page: this.currentPage,
pageSize: this.pageSize
}
axios.get('/api/data', { params })
.then(res => {
this.tableData = res.data.list
this.total = res.data.total
})
},
prevPage() {
if (this.currentPage > 1) {
this.currentPage--
this.fetchData()
}
},
nextPage() {
if (this.currentPage < this.totalPage) {
this.currentPage++
this.fetchData()
}
}
},
mounted() {
this.fetchData()
}
}
</script>使用Element UI的分页组件
如果使用Element UI，可以简化分页逻辑：
<template>
<div>
<el-table :data="tableData">
<!-- 表格列定义 -->
</el-table>
<el-pagination
@current-change="handlePageChange"
:current-page="currentPage"
:page-size="pageSize"
:total="total"
layout="prev, pager, next">
</el-pagination>
</div>
</template>
<script>
export default {
methods: {
handlePageChange(page) {
this.currentPage = page
this.fetchData()
}
}
}
</script>分页查询优化建议
- 防抖处理：频繁切换页码时添加防抖，避免短时间内多次请求
- 缓存策略：已访问过的页码数据可做本地缓存
- 滚动加载：移动端可考虑无限滚动模式替代传统分页
- URL同步：将当前页码同步到URL参数，便于分享和刷新保持状态
完整示例代码
<template>
<div>
<input v-model="searchQuery" placeholder="搜索..." @input="handleSearch"/>
<table>
<tr v-for="item in filteredData" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.value }}</td>
</tr>
</table>
<div class="pagination">
<button
v-for="page in pageNumbers"
:key="page"
@click="goToPage(page)"
:class="{ active: page === currentPage }">
{{ page }}
</button>
</div>
</div>
</template>
<script>
import _ from 'lodash'
export default {
data() {
return {
allData: [],
filteredData: [],
searchQuery: '',
currentPage: 1,
pageSize: 5,
totalItems: 0
}
},
computed: {
totalPages() {
return Math.ceil(this.totalItems / this.pageSize)
},
pageNumbers() {
const range = []
const maxVisible = 5
let start = Math.max(1, this.currentPage - Math.floor(maxVisible/2))
let end = Math.min(this.totalPages, start + maxVisible - 1)
if(end - start < maxVisible - 1) {
start = Math.max(1, end - maxVisible + 1)
}
for(let i = start; i <= end; i++) {
range.push(i)
}
return range
}
},
methods: {
fetchData: _.debounce(function() {
axios.get('/api/data', {
params: {
page: this.currentPage,
pageSize: this.pageSize,
query: this.searchQuery
}
}).then(response => {
this.filteredData = response.data.items
this.totalItems = response.data.total
})
}, 300),
handleSearch() {
this.currentPage = 1
this.fetchData()
},
goToPage(page) {
if(page !== this.currentPage) {
this.currentPage = page
this.fetchData()
}
}
},
created() {
this.fetchData()
}
}
</script>
<style>
.pagination button {
margin: 0 5px;
}
.pagination button.active {
font-weight: bold;
color: blue;
}
</style>
