手动写后台管理列表分页

<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()
      }

效果如下