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;

      }

    }

  }