<template>
<div class="vm-image-list">
<Row class="image-list-heading vm-panel">
...
</Row>
<Row class="image-list" :gutter="16">
// v-for循环v-card组件
<Col :lg="6" :sm="12" class="vm-margin" v-for="item in dataShow" :key="item.id">
<VmCard :editable="true" :title="item.title" :img="item.img" :desc="item.desc" :detailUrl="item.detailUrl" :editUrl="item.editUrl" @delete-ok=" deleteOk(item) "></VmCard>
</Col>
</Row>
<Row type="flex" align="middle" class="page">
//每页显示数目
<span>Show</span>
<Input :max="40" :min="1" :number="true" v-model="showNum" class="input-number" @on-change=" updateDataShow "></Input>
<span class="margin-end">/ Page</span>
//分页操作
<span class="total">Total {{ data.length }}</span>
<Page :total="data.length" :current="currentPage" :page-size="showNum" @on-change="pageChange"></Page>
</Row>
</div>
</template>
下面是逻辑代码
methods: {
// 从data数据中筛选出符合分页条件的数据
updateDataShow: function () {
// 分页开始的项目索引
let startPage = (this.currentPage - 1) * this.showNum
// 分页结束的项目索引
let endPage = startPage + this.showNum
this.dataShow = this.data.slice(startPage, endPage)
},
// 点击分页组件会返回页码, 根据页码更新dataShow数据(显示的项目)
pageChange: function (page) {
this.currentPage = page
this.updateDataShow()
}
效果如下