解决如何通过后台获取数据进行分页，vue.js+elementUI分页组件＜el-pagination＞，简单易懂。

本文链接：https://blog.csdn.net/weixin_45923100/article/details/107847913

前言：前端利用vue.js+elementUI进行开发，并利用它的组件`<el-pagination>` 做分页,数据通过后台获取得到。（前后端分离开发）

附加表格 prop为formdata获取来里面的字段，label为需要显示出来的表头字

<el-table :data="formdata" v-loading="loading" :header-cell-style="{background:'#eef1f6',color:'#606266'}" border style="width: 100%;">
          <el-table-column align="center" type="index" label="" />
          <el-table-column align="center" prop="" label="" />
          <el-table-column align="center" prop="" label="" />
          <el-table-column align="center" prop="" label="" />
          <el-table-column align="center" prop="" label="" />
          <el-table-column align="center" prop="" label="" />
          <el-table-column align="center" prop="" label="" />
          <el-table-column align="center" prop="" label="">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.status=='1'">审核通过</el-tag>
              <el-tag type="danger" v-if="scope.row.status=='2'">审核失败</el-tag>
              <el-tag type="warning" v-if="scope.row.status=='0'">等待审核</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="230px">
            <template slot-scope="scope">
              <!-- scope.row 获取整行信息 表示当前单元格 #ff9900ba-->
              <el-button class="btnAppeal" size="small" type="warning" @click="updateMsg(scope.row)">修改</el-button>
              <!-- <el-button class="btnAppeal" size="small" type="danger" @click="delMsg(scope.row.id)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>

前端首先要用到它的组件。 @current-change：当前页改变触发这个函数/page-size:一页几行 / :total:总行数

	<!-- 分页 -->
   <div style="text-align: center;">
     <el-pagination background layout="prev, pager, next" @current-change="pageChange" :page-size="pageSize"
       :total="totalusers" />
   </div>

layout=“prev, pager, next” : 表示上一页、当前页、下一页（下面这两个东西）

data数据（就这三个数据）

data() {
      return {
	      	totalusers: 0, //总行数
	        pageSize: 7, //每页几行
	        startpage: 1, //起始页
	        // 这个列表组件，自己找啦）<el-table :data="formdata"></el-table>
	        formdata: [], //table表格数据（获取到数据赋值给它就能显示数据列表）
      }
	}

方法调用


mounted() {
	//程序启动先执行一遍，获取第一页数据
     this.getTaskList()
   },
methods: {
	//分页 pageChange当前页发生改变触发函数
      async pageChange(page) {
        console.log("page====>>" + page)
        this.startpage = page
        //调用获取列表的方法
        this.getTaskList()
      },
      //获取分页列表
      getTaskList() {
        let params = {
          "page": this.startpage,
          "limit": this.pageSize
        }
        //调用后台提供的接口方法（这里就不详说封装接口了）
        this.$api.getTaskList(params).then(res => {
          console.log(res)
          //赋值到formdata 数组
          this.formdata = res.data.data
          this.totalusers = res.data.page_info.total
          console.log(this.totalusers)
        })
		//不封装的接口大概就这样
		/*await $get("http://127.0.0.1：8080/user/findpage/" + page + "/" + this.pagesize)
		.then(res => {
			console.log(res)
			//this.$message("加载中" + new Date());
			this.users = res.data.users;
			this.totalusers = res.data.count;
		});*/
      },
  }