???????基于el-table和el-pagination實現(xiàn)數(shù)據(jù)的分頁效果
首先使用 el-table(表格) 和 el-pagination(分頁) 組件需要 npm 下載 Element UI 組件庫,下載安裝方式參見官網(wǎng):https://element.eleme.cn/#/zh-CN/component/installation
一、案例效果
(14 條數(shù)據(jù)每頁顯示 6 條,共 3 頁。)
二、實現(xiàn)步驟&涉及要點
1. el-table 表格存放數(shù)據(jù)
<el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" stripe style="width: 100%"> <el-table-column prop="date" label="日期" width="220" align="center"></el-table-column> <el-table-column prop="name" label="姓名" width="220" align="center"></el-table-column> <el-table-column prop="job" label="職業(yè)" width="220" align="center"></el-table-column> <el-table-column prop="address" label="地址" align="center"></el-table-column> </el-table>
參數(shù) | 說明 |
---|---|
data | 顯示的數(shù)據(jù) |
stripe | 是否以斑馬紋顯示 |
prop | 對應(yīng)列內(nèi)容的字段名,也可以使用 property 屬性 |
label | 顯示的標(biāo)題 |
注意此處在選擇要顯示的數(shù)據(jù)時也需要對其進(jìn)行截取操作,否則會直接全部顯示。我們使用的是 slice(start,end) 截取數(shù)組,其中不包括 end;
:data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
每頁數(shù)據(jù)量 pageSize 為 6, currentPage 為當(dāng)前頁;比如第一頁,那么截取的就是 0 ~ 6,slice 返回的是數(shù)組副本,所以這個 0 ~ 6 代表下標(biāo),就有七條數(shù)據(jù),去掉下標(biāo)為 6 的數(shù)據(jù),即為 6 條;后面依次...
2. el-pagination 設(shè)置分頁效果
<el-pagination background layout="prev, pager, next,jumper, ->, total, slot" :total="tableData.length" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" style="text-align: center"> </el-pagination>
參數(shù) | 說明 |
---|---|
background | 是否為分頁按鈕添加背景色 |
layout | 組件布局,子組件名用逗號分隔;prev(上一頁按鈕)、pager(頁碼)、nex(下一頁按鈕)、jumper(跳轉(zhuǎn))、->(空格)、total(數(shù)據(jù)總條目數(shù)) |
current-change | currentPage 改變時會觸發(fā) |
current-page | 當(dāng)前頁數(shù) |
page-sizes | 每頁顯示個數(shù)選擇器的選項設(shè)置 |
三、完整代碼+詳細(xì)注釋
<template> <div> <div class="paging"> <!--數(shù)據(jù)顯示區(qū)域--> <div class="data"> <!--表格存放數(shù)組中的數(shù)據(jù),并對數(shù)據(jù)進(jìn)行截取,以控制每一頁顯示的數(shù)據(jù)量--> <!--slice(start,end) 不包括end--> <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" stripe style="width: 100%"> <el-table-column prop="date" label="日期" width="220" align="center"></el-table-column> <el-table-column prop="name" label="姓名" width="220" align="center"></el-table-column> <el-table-column prop="job" label="職業(yè)" width="220" align="center"></el-table-column> <el-table-column prop="address" label="地址" align="center"></el-table-column> </el-table> </div> <!--分頁按鈕--> <el-pagination background layout="prev, pager, next,jumper, ->, total" :total="tableData.length" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" style="text-align: center"> </el-pagination> </div> </div> </template> <script> export default { name: "fenye.vue", data() { return { currentPage: '1', //當(dāng)前頁 刷新后默認(rèn)顯示第一頁 pageSize: '6', //每一頁顯示的數(shù)據(jù)量 此處每頁顯示6條數(shù)據(jù) //假數(shù)據(jù) tableData: [ { date: '2016-05-02', name: '橘右京', job: '刺客', address: '上海市普陀區(qū)金沙江路 1518' }, { date: '2016-05-03', name: '娜可露露', job: '刺客', address: '上海市普陀區(qū)金沙江路 1517' }, { date: '2016-05-04', name: '魯班七號', job: '射手', address: '上海市普陀區(qū)金沙江路 1519' }, { date: '2016-05-05', name: '云中君', job: '刺客', address: '上海市普陀區(qū)金沙江路 1516' }, { date: '2016-05-06', name: '干將莫邪', job: '法師', address: '上海市普陀區(qū)金沙江路 1516' }, { date: '2016-05-07', name: '不知火舞', job: '法師', address: '上海市普陀區(qū)金沙江路 1516' }, { date: '2016-05-08', name: '沈夢溪', job: '法師', address: '上海市普陀區(qū)金沙江路 1516' }, { date: '2016-05-09', name: '百里守約', job: '刺客', address: '上海市普陀區(qū)金沙江路 1516' }, { date: '2016-05-10', name: '馬可波羅', job: '射手', address: '上海市普陀區(qū)金沙江路 1516' }, { date: '2016-05-11', name: '孫尚香', job: '射手', address: '上海市普陀區(qū)金沙江路 1516' }, { date: '2016-05-12', name: '趙云', job: '刺客', address: '上海市普陀區(qū)金沙江路 1516' }, { date: '2016-05-13', name: '鐘無艷', job: '戰(zhàn)士', address: '上海市普陀區(qū)金沙江路 1516' }, { date: '2016-05-14', name: '楊玉環(huán)', job: '法師', address: '上海市普陀區(qū)金沙江路 1516' }, { date: '2016-05-15', name: '魯班大師', job: '輔助', address: '上海市普陀區(qū)金沙江路 1516' }, ], } }, methods: { //點擊按鈕切換頁面 handleCurrentChange(currentPage) { this.currentPage = currentPage; //每次點擊分頁按鈕,當(dāng)前頁發(fā)生變化 // console.log(this.currentPage); }, }, mounted() { } } </script> <style scoped> .paging { width: 1000px; height: 500px; margin: 100px auto; } .data { width: 98%; height: 340px; border: 2px solid #cccccc; margin: 10px auto; text-align: center; } </style>
到此這篇關(guān)于基于el-table和el-pagination實現(xiàn)數(shù)據(jù)的分頁效果的文章就介紹到這了,更多相關(guān)el-table和el-pagination分頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue2實現(xiàn)自適應(yīng)屏幕大小的兩種方法詳解
這篇文章主要為大家詳細(xì)介紹了Vue2實現(xiàn)自適應(yīng)屏幕大小的兩種方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03Vue.js 2.0 移動端拍照壓縮圖片上傳預(yù)覽功能
這篇文章主要介紹了Vue.js 2.0 移動端拍照壓縮圖片上傳預(yù)覽功能,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-03-03Vue中 v-if 和v-else-if頁面加載出現(xiàn)閃現(xiàn)的問題及解決方法
vue中v-if 和v-else-if在頁面加載的時候,不滿足條件的標(biāo)簽會加載然后再消失掉,如果要解決這個問題,下面小編給大家?guī)砹藢嵗a,需要的朋友參考下吧2018-10-10