直接上代碼：

這里是這里是template部分，主要由一個需要分頁的表格和一個分頁器組成。重點在于表格的data屬性用到了一個slice截取方法。

<el-tablev-loading="listLoading":data="list.slice((currentPage - 1) * pageSize, currentPage * pageSize)"element-loading-text="Loading"highlight-current-rowborder><el-table-column align="center" label="序號" width="90"><template slot-scope="scope">{{ scope.$index + 1 }}</template></el-table-column><el-table-column label="頭像" align="center" width="150"><template slot-scope="scope"><el-avatar :src="scope.row.avatar"></el-avatar></template></el-table-column><el-table-column align="center" label="UID" width="130"><template slot-scope="scope">{{ scope.row.UID }}</template></el-table-column><el-table-column align="center" label="用戶名" width="350"><template slot-scope="scope">{{ scope.row.username }}</template></el-table-column><el-table-column align="center" label="游戲ID" width="350"><template slot-scope="scope"> {{ scope.row.usernick }} </template></el-table-column><el-table-column label="授權類型" width="110" align="center"><template slot-scope="scope"><el-tag :type="scope.row.authorizationType | tagTypeFilter">{{scope.row.authorizationType | authorizationTypeFilter}}</el-tag></template></el-table-column><el-table-column align="center" label="成功邀請人數(shù)" width="150"><template slot-scope="scope">{{ scope.row.successNum }} </template></el-table-column><!-- <el-table-column align="center" label="操作" width="150"><template slot-scope="scope"><el-buttontype="primary"size="mini"@click="change(scope.$index, scope.row)">修改</el-button></template></el-table-column> --></el-table><!-- 分頁器 --><div class="block" style="margin-top: 15px"><el-paginationalign="right"@current-change="handleCurrentChange":current-page="currentPage":page-size="pageSize"layout="prev, pager, next,total"background:total="filterList.length"hide-on-single-page></el-pagination></div>

這里是javascript部分：

export default{data(){return{currentPage:1//當前頁碼pageSize：10//每頁顯示條數(shù)list:[]//要顯示的表格數(shù)據(jù)}}methods{handleCurrentChange(val) {this.currentPage = val;},}}

實現(xiàn)如圖效果

總結(jié)

以上是生活随笔為你收集整理的如何在vue中使用表格分页功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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