vue+element+node实现分页功能

前端分页 便于方便 如果数据量大还是老老实实后端调接口吧

直接传代码 干货

先在表格下面定义1个页码按钮
<el-row :span="24">
          <div class="pagination-list">
            <el-pagination background @current-change="handleCurrentChange" :current-page.sync="paginations.page_index"
              :page-size="paginations.page_size" :layout="paginations.layout" :total="paginations.total">
            </el-pagination>
          </div>
        </el-row>

然后data 定义数据       
allItems: [],
paginations: {
          page_index: 1,
          total: 0,
          page_size: 5, //一页显示几条
          layout: "prev, pager, next"
        }

methods 定义方法

setPaginations() {
        this.paginations.total = this.allItems.length;
        this.paginations.page_index = 1;
        this.paginations.page_size = 5;
        this.items = this.allItems.filter((tableitems, index) => {
          return index < this.paginations.page_size
        });
      },
      /**
       * 点击页码跳转
       */
      handleCurrentChange(page) {
        let index = this.paginations.page_size * (page - 1);
        let items_num = this.paginations.page_size * page;
        let tables = []
        for (let i = index; i < items_num; i++) {
          if (this.allItems[i]) {
            tables.push(this.allItems[i]);
          }
          this.items = tables;
        }
      },
      
allitems是用来存放数据的 记得把你的接口数据保存到那里面去 或者你自己修改一下代码也可以