1. 前端進行分頁（后端返回所有的數據）

最主要的是對總數據進行分頁截取某個部分的數據進行顯示

<!-- 關鍵是對總數據的截取 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><!-- 分頁器 --><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: "第一頁",address: "上海市普陀區金沙江路 1518 弄",},{date: "2016-05-04",name: "第二頁",address: "上海市普陀區金沙江路 1517 弄",},{date: "2016-05-01",name: "第三頁",address: "上海市普陀區金沙江路 1519 弄",},{date: "2016-05-03",name: "第四頁",address: "上海市普陀區金沙江路 1516 弄",},{date: "2016-05-01",name: "第五頁",address: "上海市普陀區金沙江路 1519 弄",},{date: "2016-05-03",name: "第六頁",address: "上海市普陀區金沙江路 1516 弄",},{date: "2016-05-02",name: "第一頁",address: "上海市普陀區金沙江路 1518 弄",},{date: "2016-05-04",name: "第二頁",address: "上海市普陀區金沙江路 1517 弄",},{date: "2016-05-01",name: "第三頁",address: "上海市普陀區金沙江路 1519 弄",}],currentPage: 1, // 當前頁碼total: 20, // 總條數pageSize: 2, // 每頁的數據條數};},methods:{//每頁條數改變時觸發 選擇一頁顯示多少行handleSizeChange(val) {console.log(`每頁 ${val} 條`);this.currentPage = 1;this.pageSize = val;},//當前頁改變時觸發 跳轉其他頁handleCurrentChange(val) {console.log(`當前頁: ${val}`);this.currentPage = val;}} }; </script>

2. 后端分頁

前端只需要將對應的頁碼和每頁的條數通過接口傳遞給后臺即可

<el-tablev-loading="loading":data="tableData":header-cell-style="tableHeadStyle" ><el-table-column type="index" label="序號" 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="聯系電話" 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,// 列表數據tableData: [],// 數據總數total: 1,// 篩選項queryParams: {page: 1,size: 10,}}}methods: {// 獲取列表getList() {// 通過對象解析的方式獲取到頁碼和每頁條數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>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。