elementUI实现分页效果

和大家分享一下小分页( elementUI )

万里独行不一定万里无云，我往前走的时候那背影你看着当然孤伶

效果

 搜索后的效果

 话不多说上代码

 结构

<!-- 分页div -->
    <div class="pagingDive">
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange" //当前页
          @current-change="handleCurrentChange" // 每页条数
          :current-page.sync="page" //绑定当前页
          :page-size="limit" //一页显示多少条
          layout="total, prev, pager, next"
          :total="total" //绑定总条数
          @click.native="tablePagination()" //点击切换的事件
        ></el-pagination>
      </div>
    </div>

绑定的值

data(){
   return {
      
     // 分页 需要绑定的值
      limit: 8, //一页显示多少条
      page: 1, //当前页
      total: "16", //总条数,
      // 接受接口数据
      roleManagementList: [],
   }  
}

methods事件

//为什么要在搜索接口方法和显示数据的接口方法中重新调用分页的方法呢，如果不在查看接口调用数据需要点击后才能显示，搜索也是同理,还有就是数据显示了但是总条数需要点击后才能显示所以重新调用会解决这些问题
// 查看接口 === 搜索接口
    dim() {
      this.$ajax
        .post("/role/list", {
          name: this.selectVal
        })
        .then(res => {
          this.roleManagementList = res.data.data;
          this.tablePagination();
          console.log(this.roleManagementList, "模糊搜索================");
        });
    }
// 查看接口
    getList() {
      let val = {
        id: this.roleManagementList.id,
        name: this.roleManagementList.name,
        useStatus: this.roleManagementList.useStatus,
        page: this.roleManagementList.page, //告诉后端我要给你传两个参数后端也分页，然后给他传过去就好了
        limit: this.roleManagementList.limit //传递的两个参数是 当前页和每页显示数量
      };
      this.$ajax.post("/role/list", val).then(res => {
        this.roleManagementList = res.data.data;
        console.log(this.roleManagementList);
        this.tablePagination();
      });
    }   
// 分页操作
    handleCurrentChange(val) {
      //当前页
      this.page = val;
      // alert(this.page);
      console.log(this.page, "8585945048215");
    },
    handleSizeChange: function(size) {
      //每页条数
      this.limit = size;
      console.log(this.limit); //每页下拉显示数据
    },
    /**
     * 表格数据分页的方法
     */
    tablePagination() {
      let array = [],
        startNum = 0,
        endNum = 0;
      this.total = this.roleManagementList.length;
      startNum = (this.page - 1) * this.limit;
      if (this.page * this.limit < this.total) {
        endNum = this.page * this.limit;
      } else {
        endNum = this.total;
      }
      array = this.roleManagementList.slice(startNum, endNum);
      this.roleManagementList = array;
      console.log(startNum, endNum, "总条数");
      console.log(this.page);
    },
created() {
    // 执行查看接口
    this.getList();
    // 分页执行
    this.tablePagination();
  }

监听

在这里也要调用显示数据的方法
watch: {
    total() {
      //注意这个函数的名字必须和你监听data中的属性的名字一样，这样才能当你data中的属性发生变化时，触发这个函数
      if (this.total == (this.page - 1) * this.limit && this.total != 0) {
        //这一行是关键代码，倍数关系
        this.page -= 1;
        this.getList(); //获取表格数据的方法
      }
    }
  }