Vue使用Element-UI實(shí)現(xiàn)分頁(yè)效果全過(guò)程

更新時(shí)間：2023年04月27日 12:03:33 作者：小花皮豬

element-ui官網(wǎng)上有分頁(yè)實(shí)現(xiàn)的功能,簡(jiǎn)單方便又好用,也有很多分頁(yè)的樣式,你可以根據(jù)需要去選擇自己想要的樣式,下面這篇文章主要給大家介紹了關(guān)于Vue使用Element-UI實(shí)現(xiàn)分頁(yè)效果的相關(guān)資料,需要的朋友可以參考下

前言

分頁(yè)在展示數(shù)據(jù)列表的場(chǎng)景肯定是非常多的。

一般的項(xiàng)目開發(fā)中，數(shù)據(jù)量特別大，一般都是后端接口直接處理分頁(yè)返回，前端直接調(diào)用即可。

但是前端也是可以不需要借助后端，自己也是可以處理分頁(yè)的。今天我這個(gè)后端開發(fā)就站在前端的角度上，處理列表分頁(yè)。

友情提示：

數(shù)據(jù)量大的情況下一定要后端處理分頁(yè)，前端雖然可以實(shí)現(xiàn)，但是僅限數(shù)據(jù)量不是特別大的情況下！

先給大家看下我的列表，一個(gè)特別單純的列表，只是返回一個(gè)用戶列表，并且根據(jù)id倒敘排序。

給大家調(diào)用看下吧，一個(gè)很簡(jiǎn)單的結(jié)構(gòu)：

技術(shù)選項(xiàng):Pagination

這里我選擇使用的是element-ui的分頁(yè)：Pagination

它是ElementUI下的一個(gè)組件：

它的參數(shù)特別重要，我們就是借助這些參數(shù)實(shí)現(xiàn)的分頁(yè)

以下案例我只是挑選個(gè)別參數(shù)，更多參數(shù)使用說(shuō)明相間文檔

文檔：ElementUI-Pagination 分頁(yè)

大家根據(jù)自己的需求挑選一款即可，挑選不出來(lái)心儀可以參考我這一套，我也是精心挑選并且測(cè)試了很多參數(shù)。

增加分頁(yè)代碼

把這一塊加到頁(yè)面上，就有一個(gè)視覺(jué)上的分頁(yè)效果了。

相關(guān)代碼：

 <!-- 分頁(yè) -->
    <!-- 
        @size-change //  pageSize 改變時(shí)會(huì)觸發(fā) 每頁(yè)條數(shù)
        @current-change //  currentPage 改變時(shí)會(huì)觸發(fā) 當(dāng)前頁(yè)
        :current-page //  默認(rèn)false
        background//  是否為分頁(yè)按鈕添加背景色
        :page-sizes // 每頁(yè)顯示個(gè)數(shù)選擇器的選項(xiàng)設(shè)置 這是下拉框可以選擇的，每選擇一行，要展示多少內(nèi)容 類似：[10, 20, 30, 40, 50, 100]
        page-sizes=顯示當(dāng)前行的條數(shù)
        layout // 組件布局，子組件名用逗號(hào)分隔
       :total // 總條目數(shù),一般從展示列表的總數(shù)獲取
     -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      background
      :page-sizes="[1,3,5,10,20]"  
      :page-size="pagesize"         
      layout="total, sizes,  prev, pager, next, jumper" 
      :total="userTableData.length">   
    </el-pagination>

注意代碼位置，我是把分頁(yè)放在table下面了：

初始化數(shù)據(jù)

緊接著還要定義默認(rèn)頁(yè)和默認(rèn)每頁(yè)條數(shù)，以及數(shù)據(jù)列表

userTableData我是用過(guò)接口返回值賦值的。

  data() {
    return {
      userTableData: [], // 用戶列表
      currentPage:1, // 初始頁(yè)
      pagesize:10,  // 初始每頁(yè)的數(shù)據(jù)
    };
  },

回調(diào)函數(shù)

然后就是對(duì)分頁(yè)改變做出的回調(diào)函數(shù)：

邏輯寫死即可，函數(shù)名需要和上面保持一致，通常直接復(fù)制即可。

 // 初始頁(yè)currentPage、初始每頁(yè)數(shù)據(jù)數(shù)pagesize和數(shù)據(jù)data
        handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每頁(yè)下拉顯示數(shù)據(jù)
        },
        handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //點(diǎn)擊第幾頁(yè)
        },

到了這里你就可以看到列表分頁(yè)了，但是會(huì)發(fā)現(xiàn)實(shí)際展示的數(shù)據(jù)和分頁(yè)展示的不一致，不要著急，就差最后一步了！

指定table分頁(yè)

出現(xiàn)上面這種情況，是因?yàn)榱斜淼膁ata沒(méi)有適配分頁(yè)屬性:

你現(xiàn)在的代碼肯定是這樣的：

最后一步，給要展示的table指定分頁(yè)以及條件。

一行代碼：

 :data="userTableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"

查看效果

這樣就一個(gè)由前端代碼實(shí)現(xiàn)的分頁(yè)就完成了。我們檢測(cè)下吧

初始化頁(yè)面

因?yàn)槲夷J(rèn)展示的就是第一頁(yè)，并且每頁(yè)展示10條嘛，所以就是這樣的：

切換每頁(yè)條數(shù)：

大概就是這樣的，大家下去自己研究玩吧。

以下為我這個(gè)組件的全部代碼，大家靈活cv即可：

<template>
  <div>
      <!-- <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-date"></i> 數(shù)據(jù)管理</el-breadcrumb-item>
            <el-breadcrumb-item>用戶列表</el-breadcrumb-item>
        </el-breadcrumb> -->
    <el-button type="primary" icon="el-icon-circle-plus" >新增用戶</el-button>
    <!-- 用戶列表 -->
    <!-- 
      data 顯示的數(shù)據(jù)   這里增加了分頁(yè)功能
      highlight-current-row 是否要高亮當(dāng)前行 默認(rèn)false
      border 是否帶有縱向邊框 默認(rèn)false
      stripe 是否為斑馬紋 默認(rèn)false
      fit 列的寬度是否自撐開	默認(rèn)true
      cell-style 通過(guò)回調(diào)函數(shù)邏輯操作增加style樣式
     -->
    <el-table 
      :data="userTableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"  
      highlight-current-row 
      border 
      stripe
      fit 
      :cell-style="cellStyle"  >
    <!-- 自定義索引 --> 
      <el-table-column label="序號(hào)" type="index" width="50" align="center" :index="indexMethod"></el-table-column>
      <!-- <el-table-column prop="id" label="id" width="90" align="center"></el-table-column> -->
      <!-- 用戶名 -->
      <!-- 
        prop  字段值
        label 字段名稱
        width 寬度
        align 是否劇中
       -->
      <el-table-column prop="userName" label="姓名"  width="80" align="center" ></el-table-column>
      <!-- 性別 0女1男 -->
      <el-table-column label="性別" width="50" align="center" prop="sex" heign>
        <template slot-scope="scope">
          <!-- scope.row就是這一行的全部數(shù)據(jù) 動(dòng)態(tài)判斷性別字典 -->
          {{ scope.row.sex === 0 ? "女" : "男"}}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="account" label="賬號(hào)"  width="150" align="center"></el-table-column>
      <el-table-column prop="password" label="密碼" width="100" align="center"></el-table-column> -->
       <!-- 頭像 -->
      <el-table-column prop="imnage" label="頭像" width="90"  align="center"></el-table-column>
      <!-- 手機(jī)號(hào) -->
      <el-table-column prop="phone" label="手機(jī)號(hào)" width="150" align="center">
        <!-- 給內(nèi)容增加一個(gè)icon圖標(biāo) -->
        <template slot-scope="scope">    
            <i class="el-icon-phone"></i>
            <span style="margin-left: 10px">{{scope.row.phone}}</span>
        </template>
      </el-table-column>
      <!-- 備注 -->
      <el-table-column prop="remark" label="備注" width="190" align="center"></el-table-column>
      <!-- 賬號(hào)狀態(tài) -->
      <el-table-column label="賬號(hào)狀態(tài)" width="80" align="center" prop="status">
        <template slot-scope="scope">
          {{scope.row.status === 0 ? "正常" : "禁用"}}
        </template>
      </el-table-column>
      <!-- 生日 -->
      <el-table-column   prop="birthday" label="生日" width="200" align="center" sortable>
       <template slot-scope="scope">    
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{scope.row.birthday}}</span>
      </template>
      </el-table-column>
      <!-- 操作列  -->
      <!-- fixed 列是否固定在左側(cè)或者右側(cè)，true 表示固定在左側(cè)  可選:true, left, right -->
    <el-table-column fixed="right"  label="操作"  width="220" align="center" >
      <template slot-scope="scope"> 
        <!--
           scope.row就是這一行的數(shù)據(jù)  
           size 尺寸 medium / small / mini
           type 類型 	primary / success / warning / danger / info / text
           icon 圖標(biāo)類名
        -->
        <el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete"  size="small" >刪除</el-button>
        <el-button type="warning" icon="el-icon-edit" size="small">編輯</el-button>
      </template>
    </el-table-column>

      <!-- <el-table-column
      prop="createTime"
      label="創(chuàng)建時(shí)間"
      width="180"
    ></el-table-column>
    <el-table-column
      prop="updateTime"
      label="修改時(shí)間"
      width="180"
    ></el-table-column> -->
    </el-table>
    <!-- 分頁(yè) -->
    <!-- 
        @size-change //  pageSize 改變時(shí)會(huì)觸發(fā) 每頁(yè)條數(shù)
        @current-change //  currentPage 改變時(shí)會(huì)觸發(fā) 當(dāng)前頁(yè)
        :current-page //  默認(rèn)false
        background//  是否為分頁(yè)按鈕添加背景色
        :page-sizes // 每頁(yè)顯示個(gè)數(shù)選擇器的選項(xiàng)設(shè)置 這是下拉框可以選擇的，每選擇一行，要展示多少內(nèi)容 類似：[10, 20, 30, 40, 50, 100]
        page-sizes=顯示當(dāng)前行的條數(shù)
        layout // 組件布局，子組件名用逗號(hào)分隔
       :total // 總條目數(shù),一般從展示列表的總數(shù)獲取
     -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      background
      :page-sizes="[1,3,5,10,20]"  
      :page-size="pagesize"         
      layout="total, sizes,  prev, pager, next, jumper" 
      :total="userTableData.length">   
    </el-pagination>
  </div>
</template>

<script>
// 引入axios
import axios from "axios";
export default {
  name: "User",
  data() {
    return {
      userTableData: [], // 用戶列表
      currentPage:1, // 初始頁(yè)
      pagesize:10,  // 初始每頁(yè)的數(shù)據(jù)
    };
  },
  methods: {
        // 初始頁(yè)currentPage、初始每頁(yè)數(shù)據(jù)數(shù)pagesize和數(shù)據(jù)data
        handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每頁(yè)下拉顯示數(shù)據(jù)
        },
        handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //點(diǎn)擊第幾頁(yè)
        },
    //改變表格某一列或者某一個(gè)單元格文本顏色 
    cellStyle({row, column, rowIndex, columnIndex}) {
      // 定義樣式變量
      let cellStyle;
      // 根據(jù)每一行的status屬性的值進(jìn)行判斷
      // 如果是正常就展示以綠色字體展示，如果是禁用就以紅色顏色展示
      switch(row.status) {
        // 0代表正常
          case 0:
            // 設(shè)置文本顏色 綠色 可以直接寫顏色編碼，也可以直接寫顏色的單詞
            cellStyle = 'color:#70DB93';
            break;
            // 0代表金禁用
          case 1:
            // 設(shè)置文本顏色 紅色
            cellStyle = 'color:red';
            break;
            // 如果有其他狀態(tài)，就默認(rèn)顯示，不給文本顏色
          default:
          cellStyle = '';
      }
        
        //return cellStyle  // 返回最終處理過(guò)的樣式 這樣寫就是讓全部行被style修飾
        // 返回最終處理過(guò)的樣式 只讓賬號(hào)狀態(tài)這個(gè)屬性的屬性被style修飾
         if(column.label == '賬號(hào)狀態(tài)'){
          return cellStyle
        }
    },
    // 展示用戶列表      
    queryUserList() {
       axios.get('http://localhost:9090/user/queryList', {
          // 傳遞的參數(shù)
          params: {
          
          }
          // 回調(diào)函數(shù),一定要使用箭頭函數(shù),不然this的指向不是vue示例
          }).then(res =>{
            // 請(qǐng)求成功后的數(shù)據(jù)返回給用戶列表用于展示
             this.userTableData = res.data.data;
          }).catch(error =>{
             console.log(error)
          })
    },
    // 序列自增
    indexMethod(index) {
      // 每次自增1 可靈活修改
      return (index += 1);
    },
    // 刪除
    handleDelete(row) {
        // 確認(rèn)框確認(rèn)是否要?jiǎng)h除
        this.$confirm("確定要?jiǎng)h除"+row.userName+"嗎?", "刪除提示", {
          iconClass: "el-icon-question", //自定義圖標(biāo)樣式
          confirmButtonText: "殘忍刪除", //確認(rèn)按鈕文字
          cancelButtonText: "留你小命", //取消按鈕文字
          showClose: true, //是否顯示右上角關(guān)閉按鈕  默認(rèn)false
          type: "warning", //提示類型  success/info/warning/error
          //center:"true", //文字居中 默認(rèn)false
      }).then(res=> {  //選擇確認(rèn)按鈕進(jìn)入此方法
          //確認(rèn)操作 請(qǐng)求刪除接口
         axios.get('http://localhost:9090/user/delete', {
          // 傳遞的參數(shù)
          params: {
            id:row.id //id,從row獲取當(dāng)前行的用戶id
          }
          // 回調(diào)函數(shù),一定要使用箭頭函數(shù),不然this的指向不是vue示例
          }).then(res =>{
              // 刪除成功
              if(res.data.status===200){
                // 刪除成功提示
                this.$message({showClose: true, message: '刪除成功！',type: 'success', duration:1000,center:true});
                // 重新刷新最新的用戶列表
                this.queryUserList();
              }
             
          }).catch(error =>{
             console.log(error)
          })
      }).catch(() => { //選擇取消按鈕進(jìn)入此方法
        //取消操作
      });    
    }
    // 打開新增用戶的彈窗
      //  open() {
      //   this.$alert('這是一段內(nèi)容', '標(biāo)題名稱', {
      //     confirmButtonText: '確定',
      //     callback: action => {
      //       this.$message({
      //         type: 'info',
      //         message: `action: ${ action }`
      //       });
      //     }
      //   });
      // },
  },
  mounted() {
    // 頁(yè)面加載就渲染用戶列表
    this.queryUserList();
  },
};
</script>

<style  >
</style>