如何通过代码实现el-pagination每三个数据换页
时间: 2024-05-22 17:14:26 浏览: 121
您可以使用el-pagination的pageSize属性,将每一页的数据量设置为3,然后使用computed属性计算出总页数,最后在el-pagination中使用total属性设置总页数即可。具体的代码实现可以参考以下示例:
<template>
<div>
<div v-for="(item, index) in currentData" :key="index">{{ item }}</div>
<<el-pagination
:current-page="currentPage"
:page-size="3"
:total="totalPage"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
dataList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
}
},
computed: {
totalPage() {
return Math.ceil(this.dataList.length / 3)
},
currentData() {
const start = (this.currentPage - 1) * 3
const end = start + 3
return this.dataList.slice(start, end)
},
},
methods: {
handleCurrentChange(page) {
this.currentPage = page
},
},
}
</script>
阅读全文