elementUI实现分页效果+模糊搜索效果

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

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

有一点需要记住一下,就是定义一个新数组替换掉表格data绑定的值( 如果不替换分页数据不刷新 )

效果

 

 

 搜索后的效果

 

 

 话不多说上代码

 结构

 

<!-- 分页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>
<!-- 表格 -->

<Table border :columns="columnsPrivate" :data="roleManagementList"> --->替换为 <Table border :columns="columnsPrivate" :data="Ary">

 

绑定的值

 

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

   }  
}

 

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.Ary= array;//给新数组赋值并替换绑定 这个时候的Ary就是表格中的所有数据
      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(); //获取表格数据的方法
      }
    }
  }

 css

  .pagingDive {

    width: 100%;

    height: 140px;

    background: #fff;

    padding-left: 32px;

    padding-right: 32px;

    line-height: 140px;

    /deep/.el-pagination {

      display: flex;

      align-items: center;

      .el-pager,

      .el-pager li {

        vertical-align: middle;

      }

    }

  }