Vue使用Element-UI實現(xiàn)分頁效果全過程
更新時間：2023年04月27日 12:03:33 作者：小花皮豬
element-ui官網(wǎng)上有分頁實現(xiàn)的功能,簡單方便又好用,也有很多分頁的樣式,你可以根據(jù)需要去選擇自己想要的樣式,下面這篇文章主要給大家介紹了關(guān)于Vue使用Element-UI實現(xiàn)分頁效果的相關(guān)資料,需要的朋友可以參考下
前言
分頁在展示數(shù)據(jù)列表的場景肯定是非常多的。
一般的項目開發(fā)中，數(shù)據(jù)量特別大，一般都是后端接口直接處理分頁返回，前端直接調(diào)用即可。
但是前端也是可以不需要借助后端，自己也是可以處理分頁的。今天我這個后端開發(fā)就站在前端的角度上，處理列表分頁。
友情提示：
數(shù)據(jù)量大的情況下一定要后端處理分頁，前端雖然可以實現(xiàn)，但是僅限數(shù)據(jù)量不是特別大的情況下！
先給大家看下我的列表，一個特別單純的列表，只是返回一個用戶列表，并且根據(jù)id倒敘排序。
給大家調(diào)用看下吧，一個很簡單的結(jié)構(gòu)：
技術(shù)選項:Pagination
這里我選擇使用的是element-ui的分頁：Pagination
它是ElementUI下的一個組件：
它的參數(shù)特別重要，我們就是借助這些參數(shù)實現(xiàn)的分頁
以下案例我只是挑選個別參數(shù)，更多參數(shù)使用說明相間文檔
大家根據(jù)自己的需求挑選一款即可，挑選不出來心儀可以參考我這一套，我也是精心挑選并且測試了很多參數(shù)。
增加分頁代碼
把這一塊加到頁面上，就有一個視覺上的分頁效果了。
相關(guān)代碼：
<!-- 分頁 -->
<!--
@size-change // pageSize 改變時會觸發(fā) 每頁條數(shù)
@current-change // currentPage 改變時會觸發(fā) 當前頁
:current-page // 默認false
background// 是否為分頁按鈕添加背景色
:page-sizes // 每頁顯示個數(shù)選擇器的選項設(shè)置 這是下拉框可以選擇的，每選擇一行，要展示多少內(nèi)容 類似：[10, 20, 30, 40, 50, 100]
page-sizes=顯示當前行的條數(shù)
layout // 組件布局，子組件名用逗號分隔
: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>
注意代碼位置，我是把分頁放在table下面了：
初始化數(shù)據(jù)
緊接著還要定義默認頁和默認每頁條數(shù)，以及數(shù)據(jù)列表
userTableData我是用過接口返回值賦值的。
data() {
return {
userTableData: [], // 用戶列表
currentPage:1, // 初始頁
pagesize:10, // 初始每頁的數(shù)據(jù)
};
},
回調(diào)函數(shù)
然后就是對分頁改變做出的回調(diào)函數(shù)：
邏輯寫死即可，函數(shù)名需要和上面保持一致，通常直接復制即可。
// 初始頁currentPage、初始每頁數(shù)據(jù)數(shù)pagesize和數(shù)據(jù)data
handleSizeChange: function (size) {
this.pagesize = size;
console.log(this.pagesize) //每頁下拉顯示數(shù)據(jù)
},
handleCurrentChange: function(currentPage){
this.currentPage = currentPage;
console.log(this.currentPage) //點擊第幾頁
},
到了這里你就可以看到列表分頁了，但是會發(fā)現(xiàn)實際展示的數(shù)據(jù)和分頁展示的不一致，不要著急，就差最后一步了 ！
指定table分頁
出現(xiàn)上面這種情況，是因為列表的data沒有適配分頁屬性:
你現(xiàn)在的代碼肯定是這樣的：
最后一步，給要展示的table指定分頁以及條件。
一行代碼：
:data="userTableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
查看效果
這樣就一個由前端代碼實現(xiàn)的分頁就完成了。我們檢測下吧
初始化頁面
因為我默認展示的就是第一頁，并且每頁展示10條嘛，所以就是這樣的：
切換每頁條數(shù)：
大概就是這樣的，大家下去自己研究玩吧。
以下為我這個組件的全部代碼，大家靈活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ù) 這里增加了分頁功能
highlight-current-row 是否要高亮當前行 默認false
border 是否帶有縱向邊框 默認false
stripe 是否為斑馬紋 默認false
fit 列的寬度是否自撐開 默認true
cell-style 通過回調(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="序號" 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ù) 動態(tài)判斷性別字典 -->
{{ scope.row.sex === 0 ? "女" : "男"}}
</template>
</el-table-column>
<!-- <el-table-column prop="account" label="賬號" 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>
<!-- 手機號 -->
<el-table-column prop="phone" label="手機號" width="150" align="center">
<!-- 給內(nèi)容增加一個icon圖標 -->
<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>
<!-- 賬號狀態(tài) -->
<el-table-column label="賬號狀態(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 圖標類名
-->
<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)建時間"
width="180"
></el-table-column>
<el-table-column
prop="updateTime"
label="修改時間"
width="180"
></el-table-column> -->
</el-table>
<!-- 分頁 -->
<!--
@size-change // pageSize 改變時會觸發(fā) 每頁條數(shù)
@current-change // currentPage 改變時會觸發(fā) 當前頁
:current-page // 默認false
background// 是否為分頁按鈕添加背景色
:page-sizes // 每頁顯示個數(shù)選擇器的選項設(shè)置 這是下拉框可以選擇的，每選擇一行，要展示多少內(nèi)容 類似：[10, 20, 30, 40, 50, 100]
page-sizes=顯示當前行的條數(shù)
layout // 組件布局，子組件名用逗號分隔
: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, // 初始頁
pagesize:10, // 初始每頁的數(shù)據(jù)
};
},
methods: {
// 初始頁currentPage、初始每頁數(shù)據(jù)數(shù)pagesize和數(shù)據(jù)data
handleSizeChange: function (size) {
this.pagesize = size;
console.log(this.pagesize) //每頁下拉顯示數(shù)據(jù)
},
handleCurrentChange: function(currentPage){
this.currentPage = currentPage;
console.log(this.currentPage) //點擊第幾頁
},
//改變表格某一列或者某一個單元格文本顏色
cellStyle({row, column, rowIndex, columnIndex}) {
// 定義樣式變量
let cellStyle;
// 根據(jù)每一行的status屬性的值進行判斷
// 如果是正常就展示以綠色字體展示，如果是禁用就以紅色顏色展示
switch(row.status) {
// 0代表正常
case 0:
// 設(shè)置文本顏色 綠色 可以直接寫顏色編碼，也可以直接寫顏色的單詞
cellStyle = 'color:#70DB93';
break;
// 0代表金禁用
case 1:
// 設(shè)置文本顏色 紅色
cellStyle = 'color:red';
break;
// 如果有其他狀態(tài)，就默認顯示，不給文本顏色
default:
cellStyle = '';
}
//return cellStyle // 返回最終處理過的樣式 這樣寫就是讓全部行被style修飾
// 返回最終處理過的樣式 只讓賬號狀態(tài)這個屬性的屬性被style修飾
if(column.label == '賬號狀態(tài)'){
return cellStyle
}
},
// 展示用戶列表
queryUserList() {
axios.get('http://localhost:9090/user/queryList', {
// 傳遞的參數(shù)
params: {
}
// 回調(diào)函數(shù),一定要使用箭頭函數(shù),不然this的指向不是vue示例
}).then(res =>{
// 請求成功后的數(shù)據(jù)返回給用戶列表用于展示
this.userTableData = res.data.data;
}).catch(error =>{
console.log(error)
})
},
// 序列自增
indexMethod(index) {
// 每次自增1 可靈活修改
return (index += 1);
},
// 刪除
handleDelete(row) {
// 確認框確認是否要刪除
this.$confirm("確定要刪除"+row.userName+"嗎?", "刪除提示", {
iconClass: "el-icon-question", //自定義圖標樣式
confirmButtonText: "殘忍刪除", //確認按鈕文字
cancelButtonText: "留你小命", //取消按鈕文字
showClose: true, //是否顯示右上角關(guān)閉按鈕 默認false
type: "warning", //提示類型 success/info/warning/error
//center:"true", //文字居中 默認false
}).then(res=> { //選擇確認按鈕進入此方法
//確認操作 請求刪除接口
axios.get('http://localhost:9090/user/delete', {
// 傳遞的參數(shù)
params: {
id:row.id //id,從row獲取當前行的用戶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(() => { //選擇取消按鈕進入此方法
//取消操作
});
}
// 打開新增用戶的彈窗
// open() {
// this.$alert('這是一段內(nèi)容', '標題名稱', {
// confirmButtonText: '確定',
// callback: action => {
// this.$message({
// type: 'info',
// message: `action: ${ action }`
// });
// }
// });
// },
},
mounted() {
// 頁面加載就渲染用戶列表
this.queryUserList();
},
};
</script>
<style >
</style>總結(jié)
感覺elementui對分頁組件做的特別好。使用起來也特別簡單，這樣我不管從前后端哪個維度，都可以實現(xiàn)分頁了，又多學了一個技能，如果這篇文章對你有用，那就是對我最大的支持！
相關(guān)文章
Vue 最獨特的特性之一,是其非侵入性的響應(yīng)式系統(tǒng),下面這篇文章主要給大家介紹了關(guān)于Vue響應(yīng)式原理源碼剖析的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-10-10
Vue.js每天必學之構(gòu)造器與生命周期，告訴大家什么是Vue.js構(gòu)造器與生命周期，感興趣的小伙伴們可以參考一下2016-09-09
結(jié)合mint-ui移動端下拉加載實踐方法總結(jié)
下面小編就為大家?guī)硪黄Y(jié)合mint-ui移動端下拉加載實踐方法總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
el-date-picker默認結(jié)束為當前時分秒的操作方法
在element?ui中的日期時間選擇組件中默認是00:00,現(xiàn)在需求是點擊默認結(jié)束時間為當前時分秒,查了很多資料寫的都不準確?,今天給大家分享el-date-picker默認結(jié)束為當前時分秒的操作方法,感興趣的朋友一起看看吧2024-01-01
今天小編就為大家分享一篇淺談v-for 和 v-if 并用時篩選條件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了uni-app 的自定義組件，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了Vue中在setup下如何使用自定義指令，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue在echarts?tooltip中添加點擊事件案例詳解
本文主要介紹了Vue項目中在echarts?tooltip添加點擊事件的案例詳解，代碼具有一定的價值，感興趣的小伙伴可以來學習一下2021-11-11
VUE開發(fā)分布式醫(yī)療掛號系統(tǒng)后臺管理頁面步驟
本文從整體上介紹Vue框架的開發(fā)流程，結(jié)合具體的案例，使用Vue框架調(diào)用具體的后端接口，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04
這篇文章主要介紹了vue屬性props默認類型的寫法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04