elementUI-分页功能实现

第一种：一次数据请求，前端实现分页功能。

具体实现代码如下：

html:  table值绑定的

:data="infoData.canNotScraps.slice((cur_page-1)*pageSize,cur_page*pageSize)" 根据当前页自动计算要显示的哪一页数据

<el-dialog title="不能报废的卡号" center :visible.sync="dialogFormVisible" width="60%">
      <el-table v-if="infoData.canNotScraps" :data="infoData.canNotScraps.slice((cur_page-1)*pageSize,cur_page*pageSize)" stripe border>
          <el-table-column prop="card_no" label="卡号"></el-table-column>
          <el-table-column prop="card_state_name" label="状态"></el-table-column>
      </el-table>
      <!-- 分页组件ui -->
      <div style="margin-top:20px" class="pagination">
        <el-pagination
        background
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="cur_page"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        ></el-pagination>
      </div>
</el-dialog>

 

js：

infoData为后台返回数据，

infoData.canNotScraps 为后台返回的一堆表格数据组成的数组

 data() {
    return {
      infoData: {},  
  　　　cur_page: 1,
       pageSize: 20,
       total: 0,
       pageSizes:[20,30,40,50],
     };
   },

分页触发的方法，重置当前页为cur_page = 1

  // 分页导航改变页码大小在method里定义
    handleSizeChange(val) {
        this.pageSize=val;
        this.cur_page=1;
    },
    // 分页导航
    handleCurrentChange(val) {
        this.cur_page = val;
    }

第二种：分页功能每次点击去请求后台接口。

html: 在页面上定义分页组件 并且分配默认值

 <div style="margin-top:20px" class="pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page="cur_page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
   </div>

js: 在data里定义默认值 并初始化

  tableData: [],
      cur_page: 1,
      pageSize: 20,
      total: 0,

 method 里定义请求数据的方法 和 handleCurrentChange 、handleSizeChange

getData() {
      let params = {
        pageNo: this.cur_page,
        pageSize: this.pageSize,
        applyCode: this.applyCode,
        state: this.state,
        settlementOrgId: this.settlementOrgIds.slice(-1).toString(),
        createdByName: this.createdByName,
        startDate: this.time[0],
        endDate: this.time[1],
        templateType: this.templateType,
        templateCode: this.templateCode,
        templateName: this.templateName,
      };
      getStockInList(params).then((res) => {
        this.tableData = res.records;
        this.total = res.total;
        this.cur_page = res.current;
        this.pageSize = res.size;
      });
    },  // 分页导航改变页码大小 每次值改变 就去请求接口
    handleSizeChange(val) {
      this.pageSize = val;
      this.cur_page = 1;
      this.getData();
    },
    // 分页导航 每次值改变就去请求接口
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getData();
    },

element ui 文档已经很成熟了。跟着文档走，基本能实现后台管理功能的需求。