Vue+element UI實現分頁組件

介紹

這是一個是基於element-UI的分頁組件基礎上，進行了二次封裝的分頁組件，在展現數據時，該分頁組件採用了每顯示一頁數據，只請求當前頁面的數據的請求策略，從而避免了一次性將數據所有請求所形成的資源浪費。

使用方法

因爲該組件是基於element-UI的分頁組件進行二次封裝，因此在使用該組件時請務必安裝element-UI（安裝方式猛戳這裏），安裝好element-UI後，只需將該組件文件夾Pagination導入到現有項目中便可使用。

示例

 1 <template>
 2   <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="limit" @pagination="getList" />
 3 </template>
 4 <script>
 5   import Pagination from '@/components/Pagination';
 6   export default {
 7     components: { Pagination },
 8     data () {
 9       return {
10         list:null,   //請求回來填充表格的數據   
11         total:0,     //數據總條數 
12         page: 1,    //默認顯示第1頁
13         limit: 10   //默認一次顯示10條數據
14       }
15     }，
16     methods:{
17       getlist(){
18       var start = (this.page - 1) * this.limit;
19       var end   = this.page * this.limit;
20       this.$axios.get(url + '?start=' + start + '&end=' + end)
21         .then(response => {
22               this.list = response.data.items;
23               this.total = response.data.total;
24               resolve();
25         }).catch(err => {
26           reject(err);
27         })
28     }
29     }
30   }
31 </script>

 

選項

屬性	描述	類型	默認值	是否必須
total	數據總數	Number	0	是
page	當前頁碼	Number	1	是
limit	每頁顯示數據條目個數	Number	10	是
pageSizes	每頁顯示個數選擇器的選項設置	Array	[10,20,30]	否
layout	組件佈局	String	'total, sizes, prev, pager, next, jumper'	否
background	是否爲分頁按鈕添加背景色	Boolean	true	否

效果圖

 

完整代碼請戳☞Vue-Components-Library/Pagination/

（完）