溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

在Vue項(xiàng)目中使用Element-UI如何實(shí)現(xiàn)一個(gè)分頁顯示效果

發(fā)布時(shí)間：2020-11-16 13:56:24 來源：億速云 閱讀：458 作者：Leah 欄目：開發(fā)技術(shù)

在Vue項(xiàng)目中使用Element-UI如何實(shí)現(xiàn)一個(gè)分頁顯示效果？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

當(dāng)我們從后端返回的數(shù)據(jù)量很大，并且根據(jù)需求我們需要將返回的數(shù)據(jù)全部都顯示在頁面中，默認(rèn)情況下會(huì)把所有的數(shù)據(jù)全部顯示在一個(gè)頁面，這樣非常影響視覺和頁面的使用，所以需要使用分頁

我這次使用的是Vue4.0 +  Element-UI組件，Element-UI庫非常的豐富，它提供了一個(gè)分頁組件 Pagination

展示效果：這個(gè)是獲取兩個(gè)時(shí)間段的上機(jī)記錄

在Vue項(xiàng)目中使用Element-UI如何實(shí)現(xiàn)一個(gè)分頁顯示效果

HTML部分：

<el-card>
 <div class="block">
 <span >
  <span class="demonstration" style='margin-right:10px'>
  開始日期
  </span>
  <el-date-picker v-model="value1" type="datetime"
  placeholder="選擇日期" format="yyyy-MM-dd HH:mm:ss"
  value-format="yyyy-MM-dd hh:mm:ss">
  </el-date-picker>
 </span>
 <span >
  <span class="demonstration" style='margin-right:10px'>
 截止日期</span>
  <el-date-picker v-model="value2" type="datetime"
 placeholder="選擇日期" value-format="yyyy-MM-dd HH:mm:ss"
  format="yyyy-MM-dd hh:mm:ss">
  </el-date-picker>
 </span>
 <el-button type="primary" 
 @click="lineCrodList">
 搜索
 </el-button>
 </div>
 <el-table :data="lineData" >
 <el-table-column prop="onTime" label="上機(jī)時(shí)間">
 </el-table-column>
 <el-table-column prop="downTime" label="下機(jī)時(shí)間">
 </el-table-column>
 <el-table-column prop="spendCash" label="花費(fèi)時(shí)間">
 </el-table-column>
 <el-table-column prop="spendCash" label="花費(fèi)金額">
 </el-table-column>
 </el-table>
 
 <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
 :page-sizes="[1, 2, 5, 10]" :page-size="pageSize"
 layout="total, sizes, prev, pager, next, jumper"
 :total="total">
 </el-pagination>
 
</el-card>

分頁控件的代碼如下： 

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
 :page-sizes="[1, 2, 5, 10]" :page-size="pageSize"
 layout="total, sizes, prev, pager, next, jumper"
 :total="total">
</el-pagination>

解析：

@size-change:這個(gè)是一個(gè)方法，當(dāng)在頁面改變每頁顯示的條數(shù)時(shí)，會(huì)觸發(fā)該方法

在Vue項(xiàng)目中使用Element-UI如何實(shí)現(xiàn)一個(gè)分頁顯示效果

@current-change:點(diǎn)擊當(dāng)前頁改變的時(shí)候會(huì)觸發(fā)該方法

在Vue項(xiàng)目中使用Element-UI如何實(shí)現(xiàn)一個(gè)分頁顯示效果

:current-page:當(dāng)前頁數(shù)

:page-sizes:個(gè)數(shù)選擇器的選項(xiàng)設(shè)置

在Vue項(xiàng)目中使用Element-UI如何實(shí)現(xiàn)一個(gè)分頁顯示效果

:page-size:每頁顯示的條數(shù)

:total:總數(shù)據(jù)數(shù)量

JS代碼：

<script>
export default {
 data () {
 return {
 value1: '',
 value2: '',
 lineData: [],
 username: '',
 total: 0, //實(shí)現(xiàn)動(dòng)態(tài)綁定
 pageSize: 2,
 currentPage: 1,
 
 }
 },
 methods: {
 //當(dāng)改變每頁顯示條數(shù)的選擇器時(shí)會(huì)觸發(fā)的事件
 handleSizeChange (size) {
 // 每頁顯示的數(shù)量是我們選擇器選中的值size
 this.pageSize = size;
 console.log(this.pageSize);//每頁下拉顯示數(shù)據(jù)
 this.lineCrodList();
 },
//當(dāng)改變當(dāng)前頁數(shù)的時(shí)候觸發(fā)的事件
 handleCurrentChange (currentPage) {
 this.currentPage = currentPage;
 console.log(this.currentPage);//點(diǎn)擊第幾頁
 this.lineCrodList();
 },
//獲取用戶上機(jī)記錄的信息分頁
 async lineCrodList () {
 
 //調(diào)用 獲取total數(shù)據(jù)的方法
 this.counttotal();
 await this.$http.post('/Line/SelectInfo', {
 userName: this.username,
 onTime: this.value1,
 downTime: this.value2,
 spendCash: 0,
 start: （this.currentPage-1）* this.pageSize,
 pageSize: this.pageSize
 }).then(res => {
 this.lineData = res.data;
 console.log(res.data)
 })
 },
 //獲取用戶總條數(shù)
 async counttotal () {
 await this.$http.post('/Line/selectTotal', {
 userName: this.username,
 onTime: this.value1,
 downTime: this.value2,
 }).then(res => {
 this.total = res.data;
 })
}

我們前端請(qǐng)求的時(shí)候需要給后端發(fā)送start 和 pageSize 這兩個(gè)參數(shù) 因?yàn)榫唧w的數(shù)據(jù)是后端通過數(shù)據(jù)庫來搜索的

后臺(tái)Sql語句，其他層的代碼我就不在這里列出

在Vue項(xiàng)目中使用Element-UI如何實(shí)現(xiàn)一個(gè)分頁顯示效果

可以看到 limit  i，n

i：表示查詢結(jié)果的索引值

n：為查詢結(jié)果的返回?cái)?shù)量

i 和 n之間用逗號(hào)分隔

例子：

#分頁顯示新聞數(shù)據(jù)，每頁顯示兩條，這里顯示第一頁
SELECT id,title,author,createdate FROM news_detail LIMIT 0,2
#分頁顯示新聞數(shù)據(jù)，每頁顯示兩條，這里顯示第二頁
SELECT id,title,author,createdate FROM news_detail LIMIT 2,2
#分頁顯示新聞數(shù)據(jù)，每頁顯示兩條，這里顯示第三頁
SELECT id,title,author,createdate FROM news_detail LIMIT 4,2
#公用的分頁sql
#第二個(gè)數(shù)：分頁后每頁顯示幾條新聞（頁面容量） pageSize
#第一個(gè)數(shù)：從第幾條數(shù)據(jù)開始顯示（當(dāng)前頁碼pageNo-1）*pageSize
SELECT id,title,author,createdate FROM news_detail 
LIMIT （pageNo-1）*pageSize,pageSize

我把(pageNo-1)*pageSize 寫到了前端，所以就無需在后端重復(fù)寫

在Vue項(xiàng)目中使用Element-UI如何實(shí)現(xiàn)一個(gè)分頁顯示效果

# 查詢8條數(shù)據(jù)，索引從5到12，第6條記錄到第13條記錄 select * from t_user limit 5,8;

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手