vue实现分页表
Vue 实现分页表格
在 Vue 中实现分页表格通常需要结合表格组件和分页组件，以下是常见的实现方法：
使用 Element UI 实现分页表格
安装 Element UI：
npm install element-ui在 main.js 中引入：
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)组件实现：
<template>
<div>
<el-table :data="currentTableData" border>
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [], // 全部数据
currentPage: 1,
pageSize: 10,
currentTableData: [] // 当前页数据
}
},
methods: {
handleSizeChange(val) {
this.pageSize = val
this.updateCurrentTableData()
},
handleCurrentChange(val) {
this.currentPage = val
this.updateCurrentTableData()
},
updateCurrentTableData() {
const start = (this.currentPage - 1) * this.pageSize
const end = start + this.pageSize
this.currentTableData = this.tableData.slice(start, end)
}
},
mounted() {
// 模拟获取数据
this.tableData = Array.from({length: 100}, (_, i) => ({
date: `2023-01-${i+1}`,
name: `用户${i+1}`,
address: `地址${i+1}`
}))
this.updateCurrentTableData()
}
}
</script>使用原生 Vue 实现分页表格
如果不使用 UI 框架，可以原生实现：
<template>
<div>
<table>
<thead>
<tr>
<th>日期</th>
<th>姓名</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<tr v-for="item in currentTableData" :key="item.id">
<td>{{ item.date }}</td>
<td>{{ item.name }}</td>
<td>{{ item.address }}</td>
</tr>
</tbody>
</table>
<div class="pagination">
<button @click="prevPage" :disabled="currentPage === 1">上一页</button>
<span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
<button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
currentPage: 1,
itemsPerPage: 10
}
},
computed: {
currentTableData() {
const start = (this.currentPage - 1) * this.itemsPerPage
const end = start + this.itemsPerPage
return this.tableData.slice(start, end)
},
totalPages() {
return Math.ceil(this.tableData.length / this.itemsPerPage)
}
},
methods: {
prevPage() {
if (this.currentPage > 1) this.currentPage--
},
nextPage() {
if (this.currentPage < this.totalPages) this.currentPage++
}
},
mounted() {
// 模拟获取数据
this.tableData = Array.from({length: 100}, (_, i) => ({
id: i+1,
date: `2023-01-${i+1}`,
name: `用户${i+1}`,
address: `地址${i+1}`
}))
}
}
</script>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
.pagination {
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
</style>使用 Vue 3 Composition API 实现
Vue 3 可以使用 Composition API 更简洁地实现：
<template>
<!-- 表格和分页组件同上 -->
</template>
<script setup>
import { ref, computed } from 'vue'
const tableData = ref(Array.from({length: 100}, (_, i) => ({
id: i+1,
date: `2023-01-${i+1}`,
name: `用户${i+1}`,
address: `地址${i+1}`
})))
const currentPage = ref(1)
const itemsPerPage = ref(10)
const currentTableData = computed(() => {
const start = (currentPage.value - 1) * itemsPerPage.value
const end = start + itemsPerPage.value
return tableData.value.slice(start, end)
})
const totalPages = computed(() =>
Math.ceil(tableData.value.length / itemsPerPage.value)
)
function prevPage() {
if (currentPage.value > 1) currentPage.value--
}
function nextPage() {
if (currentPage.value < totalPages.value) currentPage.value++
}
</script>关键点总结
分页实现的核心逻辑是计算当前页应该显示的数据片段。通常需要维护以下变量：
- 全部数据数组
- 当前页码
- 每页显示数量
- 总页数（计算属性）
分页组件需要处理的主要事件：
- 页码改变事件
- 每页数量改变事件
对于大数据量，建议在后端实现分页，前端只请求当前页的数据，而不是一次性获取所有数据。
