vue项目 - element 后端配合实现分页效果

此功能是结合element组件去实现的，

实现效果：

实现代码：

   <div class="page">
        <el-pagination
          ref="page"
          @size-change="handleSizeChange"
          :current-page="form2.pageNow"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="form2.pagesize"
          background
          :total="totalCount"
          prev-text="上一页"
          next-text="下一页"
          layout="prev ,pager ,next ,sizes, jumper, total"
        ></el-pagination>
        <!-- 
        	total  总条目数 
        -->
      </div>
      data(){
      	totalCount:'' // 总数
        form2: {
        	pageNow: 1, //页数
        	pageSize: 10, // 每页条数
      },
	}

    // 获取接口数据
    hadnleFindPage() {
      const params = {
        pageNow: this.form2.pageNow,
        pageSize: this.form2.pageSize,
        // 一定要记得将拿到的(每页条数，页面数)传递给后端，不然页面不更新显示数据
      };
      loginLogList(params).then((res) => {
        this.tableData = res.data.data.list;
        //这里是我自己页面需要配置的数据
        this.totalCount = res.data.data.totalCount;
        console.log(this.totalCount, "totalCount");
      });
    },
    // element 提供
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.form2.pageSize = val;
      this.hadnleFindPage();
      // 每页多少条
      // console.log(this.pageSize, "当前条数");
    },
    handleCurrentChange(val) {
      // 当前页数
      // console.log(`当前页: ${val}`);
      this.form2.pageNow = val; // 拿到当前的页数值
      this.hadnleFindPage(); // 重新请求数据
      // console.log(this.form2.pageNow, "切换后的页");
    },