iview page分頁元件的整合

iview page分頁元件的整合

今天給大家分享一下iview page分頁元件與iview table**的整合,主要是針對前端整合,整個前端採用vue渲染,首先我們檢視一下iview page分頁元件的介紹,分頁元件的樣式加起來不外乎就是以下style

所以後台提供介面需要返回資料總條數total,需要接受前台傳入pagenum和pagesize兩個引數，我的專案是採用vue-cli生成的專案，關於vue-cli生成專案可以參考部落格

第一步：html vue渲染整合所有樣式，引入iview page元件,首先在main.js裡面加入

第二步：引入元件

2、:current是page屬性，為當前頁數

3、:page-size是page屬性，為當前顯示資料條數

4、show-elevat對應html 圖中跳至1頁

5、show-sizer對應html圖中10條/頁

6、show-total對用html圖中共58條

api如下圖所示：

第三步：data裡面初始化：

pagetotal: 0,

pagenum: 1,
pagesize: 10,

handlepage(value) ,

handlepagesize(value) ,

//獲取教師資訊列表

//處理上課方式
if (typeof vm.data1[i].classtype != 'undefined' && vm.data1[i].classtype != null) else if (classtypearr[j] == 1) else if (classtypearr[j] == 2) 
}vm.data1[i].classtype = vm.data1[i].classtype.substr(0, vm.data1[i].classtype.length - 1)
}//處理家教經驗
if (typeof vm.data1[i].turorexperience != 'undefined' && vm.data1[i].turorexperience != null) 
}//處理教師星級
if (typeof vm.data1[i].levelid != 'undefined' && vm.data1[i].levelid != null) 
}//處理審核狀態
if (typeof vm.data1[i].audit != 'underfined' && vm.data1[i].audit != null) }}
}}).catch(error => )
},

1、html

columns3: [

,}),
h('strong', params.row.name)
]);}},,
,,,,
,,,,
,,,,
,,,,
,,,,
,,,style: ,
on: 
}h('button', ,
style: ,
on: 
}}, '去審核'),
h('button', ,
on: 
}}, '設定星級')
]);}}],
data1: [
],

第六步：效果如下：

解決iview Page元件無法重置為第一頁的問題

在page元件的ref屬性中設定乙個id值例如 pages,在vue例項中是用 refs pages 操作該元件即可,給你的page上新增 ref 屬性 我這裡是 ref pages pages style text align right margin 20px 0 on change selec...

Element UI 的分頁元件

sizechange size 當使用者單擊任意頁碼或實現頁面跳轉時會觸發current page屬性的變化。currentchange current 擷取頁數 woekeralldata.slice pagenumber currentchangeindex 1 pagenumber curre...

分頁元件display tag

一 是什麼？display tag lib是乙個標籤庫，二 何作用？用來處理jsp網頁上的table，功能非常強，可以對的table進行分頁 資料匯出 分組 對列排序等等，使用起來方便，能夠大大減少 量。三 基本部署？基於display tag1.2 1 將displaytag 1.2.jar放置到...