vue 實現分頁元件

類似於element分頁（縮減版）， 廢話不多說，直接上**

元件vue**

var pagination=}條

div>
<
button 
class
="first"
@click
="first"
v-bind:disabled
="a"
>}
button
>
<
button 
class
="prev"
@click
="prev"
:disabled
="b"
>}
button
>
<
ul>
<
li v-for
="item in list"
@click
="buttonpage(item)"
:class
="">}
li>
ul>
<
button 
class
="next"
@click
="next"
:disabled
="c"
>}
button
>
<
button 
class
="last"
@click
="last"
:disabled
="d"
>}
button
>
<
input 
:value
="value"
@input
="change"
/>
<
button  
@click
="just"
>跳轉
button
>
div>
`,            data()
},props:["config"],
created()
for(var i=1;i
<
=this
.li;i++)
console.log(this.currentpage)
this.value 
= this.currentpage
this.input 
= this.currentpage
if(this.currentpage 
== 1)else if(this.currentpage
==this.li)else
},methods:,
just()else
},first(),
last(),
prev()
},next()
},buttonpage(val)else if(val
==this.li)else
this.value 
= val
this.currentpage 
= val
this.input 
= val
this.$emit("currentpage",val)
//ajax請求資料}}
}

.main

.main input
.main button
ulli
.active

使用方法：在父元件中模板中引入

pageconfig:

handcurrenpage(val)

total是獲取的總數，pagesize是每頁要顯示的條數，handcurrenpage是獲取頁面的方 val=== 點選的頁數

在頁面created中調取介面拿到第一頁資料，其他介面則放在handcurrenpage中獲取其它頁資料。

vue分頁元件實現

子元件中 page bar pageul sendmessage reduce class page a li for index in indexs key index class btnclick index a li page click sendmessage add a li page 共...

分頁元件 vue

專案開發中，經常會遇到分頁功能，也會經常涉及元件化開發和元件復用，下列用vue對分頁元件進行了簡單封裝，具體 如下 源 2 pagination.vue 片段 3 pagination.css 片段 ul,li page bar page button disabled page bar li pa...

Vue 實現乙個分頁元件

實現分頁元件要分三個部分 樣式，邏輯，和引用 首先新建乙個vue檔案用來承載元件內容 第一步 構建樣式 第二步 編寫邏輯 第三步 引用元件 1.在父元件中引入並註冊 components 2.在data下宣告三個變數 total 0,記錄總條數 display 10,每頁顯示條數 current 1...