1皆看,分頁(yè)時(shí)候引入vue自帶的分頁(yè)組件實(shí)現(xiàn):
? ? ? ? ?(1)? ?<!-- 分頁(yè)操作 -->
? ? ? ? ? ? <el-pagination
? ? ? ? ? ? ? @size-change="handleSizeChange"
? ? ? ? ? ? ? @current-change="handleCurrentChange"
? ? ? ? ? ? ? :current-page.sync="currentPage.page"
? ? ? ? ? ? ? :page-sizes="[10,20,30,40,50]"
? ? ? ? ? ? ? :page-size="currentPage.pageSize"
? ? ? ? ? ? ? layout="total, sizes, prev, pager, next, jumper"
? ? ? ? ? ? ? :total="currentPage.pageTotal">
? ? ? ? ? ? </el-pagination>
?(2),return里面定義
? ? ? ?currentPage :{
? ? ? ? ? ? pageTotal:0,
? ? ? ? ? ? pageSize: 10,
? ? ? ? ? ? page: 1
? ? ? ? },
(3),分頁(yè)處理邏輯
? ? ? ? handleSizeChange(val) {
? ? ? ? ? console.log(`每頁(yè) ${val} 條`);
? ? ? ? },
? ? ? ? handleCurrentChange(val) {
? ? ? ? ? ? ? ?console.log(`當(dāng)前頁(yè): ${val}`);
? ? ? ? ? ? ?let importdata = {
? ? ? ? ? ? //當(dāng)每頁(yè)顯示條數(shù)
? ? ? ? ? ? ? pageSize:20,
? ? ? ? ? ? ? //當(dāng)前頁(yè)碼
? ? ? ? ? ? ? pageNum:val
? ? ? ? ? }
? ? ? ? ? machinelistsearch(importdata).then((response)=>{
? ? ? ? ? ? if(response.code == 200){
? ? ? ? ? ? ? console.log(response,'分頁(yè)操作返回的數(shù)據(jù)')
? ? ? ? ? ? ? //顯示數(shù)組
? ? ? ? ? ? ? this.tableData = response.data.list
? ? ? ? ? ? ? //總條數(shù)
? ??????????this.currentPage.pageTotal = response.data.total;
? ? ? ? ? ? }else{
? ? ? ? ? ? ? this.$message({type: 'warning', message: ("設(shè)備發(fā)放列表查詢(xún)失敗")});
? ? ? ? ? ? }
? ? ? ? ? });
? ? ? ? },