目錄

業(yè)務(wù)場景

官方鏈接

實現(xiàn)效果

使用框架

代碼展示

template代碼

script代碼

變量定義

事件定義

????????handleSizeChange事件--實現(xiàn)每頁條數(shù)改變表格動態(tài)變化

????????handleCurrentChange事件--切換頁碼

????????css代碼

完整代碼

總結(jié)

業(yè)務(wù)場景

當(dāng)表格中的數(shù)據(jù)量如果非常龐大的時候我們不可能讓數(shù)據(jù)整個全部一下展示出來，導(dǎo)致用戶需要無限的往下滾動鼠標(biāo)，給用戶造成不清楚到底有多少數(shù)據(jù)的一個現(xiàn)象，讓用戶產(chǎn)生看不到頭的焦躁心理。這時候我們可以借助分頁器去實現(xiàn)數(shù)據(jù)的分頁效果，根據(jù)頁數(shù)和每頁條數(shù)去實現(xiàn)真分頁。

這個在項目中是經(jīng)常使用到的一種場景，今天我來分享分享我們具體的實現(xiàn)和需要注意的一些點

官方鏈接

Pagination 分頁：Pagination 分頁 | Element Plus

實現(xiàn)效果

這篇博客要實現(xiàn)的是課程和班級的一個綁定關(guān)系，當(dāng)頁面加載之后給課程和班級下拉框一個默認(rèn)值，通過切換課程班級下拉框中的選項之后班級下拉框中的選項也隨之變換成，當(dāng)前選中課程下的所有班級名

使用框架

Vue3+element-plus(1.2.0-beta.5)

流程

動態(tài)切換每頁條數(shù)：

• 在el-pagination組件上綁定一個變量，例如pageSize，用于表示每頁顯示的條數(shù)。
• 使用@change事件監(jiān)聽每頁條數(shù)的變化，當(dāng)每頁條數(shù)改變時，觸發(fā)相應(yīng)的方法。
• 在方法中，更新pageSize變量的值，并重新獲取數(shù)據(jù)。

動態(tài)切換每頁條數(shù)：

• 在el-pagination組件上綁定一個變量，例如pageSize，用于表示每頁顯示的條數(shù)。
• 使用@change事件監(jiān)聽每頁條數(shù)的變化，當(dāng)每頁條數(shù)改變時，觸發(fā)相應(yīng)的方法。
• 在方法中，更新pageSize變量的值，并重新獲取數(shù)據(jù)。

?

代碼展示

說明：在本篇博客中我重點分享分頁器的時候，關(guān)于el-table表格可以參考這篇博客：el-table 列的動態(tài)顯示與隱藏_吃豆子的恐龍的博客-CSDN博客

template代碼

<!-- 分頁器 -->
<div class="demo-pagination-block">
    <span class="demo-pagination-block allTotal">共{{ total }}條</span>
    <el-config-provider :locale="locale">
      <el-pagination
        :total="total"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[30, 50, 100]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-config-provider>
</div>

script代碼

變量定義

var total = ref(0); //總條數(shù)

// 當(dāng)前頁數(shù)
const currentPage = ref(1);

//每頁顯示條目個數(shù)
const pageSize = ref(30);

//是否使用小型分頁樣式
const small = ref(false);

//是否為分頁按鈕添加背景色
const background = ref(false);

//是否禁用分頁
const disabled = ref(false);

事件定義

handleSizeChange事件--實現(xiàn)每頁條數(shù)改變表格動態(tài)變化

//每頁顯示條數(shù)改變
const handleSizeChange = (val) => {
      searchContent.value = "";
      pageSize.value = val;
      currentPage.value = currentPage.value;    
};

handleCurrentChange事件--切換頁碼

 //當(dāng)前頁變動
    const handleCurrentChange = (val) => {
      pageSize.value = pageSize.value;
      currentPage.value = val;
      studentData(classID.value, courseID.value, currentPage.value, pageSize.value);
    };

css代碼

.demo-pagination-block {
  display: inline-block;
  position: relative;
}

.allTotal {
  position: absolute;
  left: -4em;
  top: 7px;
  color: #606266;
  font-size: 14px;
}

完整代碼

<template>
    <!-- 分頁器 -->
    <div class="demo-pagination-block">
        <span class="demo-pagination-block allTotal">共{{ total }}條</span>
        <el-config-provider :locale="locale">
          <el-pagination
            :total="total"
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[30, 50, 100]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="sizes, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-config-provider>
    </div>
</template>

<script>
import { reactive, ref, onMounted } from "vue";

export default {
  components: {
  },
  setup() {
	//總條數(shù)
    var total = ref(0); 

    // 當(dāng)前頁數(shù)
    const currentPage = ref(1);
    
    //每頁顯示條目個數(shù)
    const pageSize = ref(30);
    
    //是否使用小型分頁樣式
    const small = ref(false);
    
    //是否為分頁按鈕添加背景色
    const background = ref(false);
    
    //是否禁用分頁
    const disabled = ref(false);
      
	//每頁顯示條數(shù)改變
	const handleSizeChange = (val) => {
          searchContent.value = "";
          pageSize.value = val;
          currentPage.value = currentPage.value;    
	};


 	//當(dāng)前頁變動
    const handleCurrentChange = (val) => {
          pageSize.value = pageSize.value;
          currentPage.value = val;
          studentData(classID.value, courseID.value, currentPage.value, pageSize.value);
    };


    return {
      total,
        currentPage,
        pageSize,
        small,
        background,
    	disabled,
        handleSizeChange,
        handleCurrentChange,
    };
  },
};
</script>

<style>
    .demo-pagination-block {
      display: inline-block;
      position: relative;
    }
    
    .allTotal {
      position: absolute;
      left: -4em;
      top: 7px;
      color: #606266;
      font-size: 14px;
}

</style>

關(guān)于當(dāng)前頁面的實現(xiàn)可以參考如下博客：

el-table：el-table 列的動態(tài)顯示與隱藏_吃豆子的恐龍的博客-CSDN博客

el-Dropdown：http://t.csdn.cn/jFp2f

總結(jié)

多看官方文檔，我們遇到的很多問題其實文檔中都有詳細(xì)說明！文章來源地址http://www.zghlxwxcb.cn/news/detail-631223.html

如果有想要交流的內(nèi)容歡迎在評論區(qū)進(jìn)行留言，如果這篇文檔受到了您的喜歡那就留下你點贊、收藏腳印支持一下博主~

到了這里，關(guān)于el-pagination 動態(tài)切換每頁條數(shù)、頁數(shù)切換的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！