1. 前端進(jìn)行分頁(yè)（后端返回所有的數(shù)據(jù)）

最主要的是對(duì)總數(shù)據(jù)進(jìn)行分頁(yè)截取某個(gè)部分的數(shù)據(jù)進(jìn)行顯示

<!-- 關(guān)鍵是對(duì)總數(shù)據(jù)的截取 tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize) --> <el-table:data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"style="width: 100%"><el-table-column prop="date" label="日期" width="180"> </el-table-column><el-table-column prop="name" label="姓名" width="180"> </el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table><!-- 分頁(yè)器 --><div class="block" style="margin-top: 15px"><el-paginationalign="center"@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[1, 5, 10, 20]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="tableData.length"></el-pagination></div><script> export default {name: "elementui",data() {return {name: "elementUi",tableData: [{date: "2016-05-02",name: "第一頁(yè)",address: "上海市普陀區(qū)金沙江路 1518 弄",},{date: "2016-05-04",name: "第二頁(yè)",address: "上海市普陀區(qū)金沙江路 1517 弄",},{date: "2016-05-01",name: "第三頁(yè)",address: "上海市普陀區(qū)金沙江路 1519 弄",},{date: "2016-05-03",name: "第四頁(yè)",address: "上海市普陀區(qū)金沙江路 1516 弄",},{date: "2016-05-01",name: "第五頁(yè)",address: "上海市普陀區(qū)金沙江路 1519 弄",},{date: "2016-05-03",name: "第六頁(yè)",address: "上海市普陀區(qū)金沙江路 1516 弄",},{date: "2016-05-02",name: "第一頁(yè)",address: "上海市普陀區(qū)金沙江路 1518 弄",},{date: "2016-05-04",name: "第二頁(yè)",address: "上海市普陀區(qū)金沙江路 1517 弄",},{date: "2016-05-01",name: "第三頁(yè)",address: "上海市普陀區(qū)金沙江路 1519 弄",}],currentPage: 1, // 當(dāng)前頁(yè)碼total: 20, // 總條數(shù)pageSize: 2, // 每頁(yè)的數(shù)據(jù)條數(shù)};},methods:{//每頁(yè)條數(shù)改變時(shí)觸發(fā) 選擇一頁(yè)顯示多少行handleSizeChange(val) {console.log(`每頁(yè) ${val} 條`);this.currentPage = 1;this.pageSize = val;},//當(dāng)前頁(yè)改變時(shí)觸發(fā) 跳轉(zhuǎn)其他頁(yè)handleCurrentChange(val) {console.log(`當(dāng)前頁(yè): ${val}`);this.currentPage = val;}} }; </script>

2. 后端分頁(yè)

前端只需要將對(duì)應(yīng)的頁(yè)碼和每頁(yè)的條數(shù)通過(guò)接口傳遞給后臺(tái)即可

<el-tablev-loading="loading":data="tableData":header-cell-style="tableHeadStyle" ><el-table-column type="index" label="序號(hào)" align="center" min-width="180" /><el-table-column prop="name" label="姓名" align="center" min-width="180" /><el-table-column prop="sex" label="性別" align="center" min-width="180" /><el-table-column prop="contactPhone" label="聯(lián)系電話" align="center" min-width="180" /><el-table-column prop="skillType" label="技能工種" align="center" min-width="180" /> </el-table> <paginationv-show="total>0":total="total":page.sync="queryParams.page":limit.sync="queryParams.size"@pagination="getList" /> <script> export default {name: 'InfoAdmin',data() {return {// 列表loadingloading: false,// 列表數(shù)據(jù)tableData: [],// 數(shù)據(jù)總數(shù)total: 1,// 篩選項(xiàng)queryParams: {page: 1,size: 10,}}}methods: {// 獲取列表getList() {// 通過(guò)對(duì)象解析的方式獲取到頁(yè)碼和每頁(yè)條數(shù)const data = { ...this.queryParams, userId: 101 }this.loading = truegetInfoAdmin(data).then(res => {console.log(res)if (res.code === 0) {this.tableData = res.data.listthis.total = res.data.total}}).catch(err => {console.log(err)}).finally(() => {this.loading = false})}} } </script>

總結(jié)

以上是生活随笔為你收集整理的前端实现elementUi table表格分页的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。