有一段時(shí)間沒(méi)更新文章了，主要是因?yàn)樽约阂恢痹诿χ鴮W(xué)習(xí)新的東西而忘記分享了搪泳，實(shí)在慚愧稀轨。
該文章為本人轉(zhuǎn)載，原文地址已經(jīng)找不到了岸军。
分享一個(gè)編寫(xiě)的一個(gè)Vue的小組件，名叫BootPage。不了解Vue.js的童鞋可以移步我的上一篇文章《淺談Vue.js》了解一下涵卵。
BootPage組件簡(jiǎn)介
其實(shí)也不是啥高大上的組件了提佣，相反確實(shí)一個(gè)簡(jiǎn)單的表格分頁(yè)組件而已，主要是自己最近項(xiàng)目中需要一個(gè)表格分頁(yè)組件方妖，而Vue官方組件庫(kù)里分頁(yè)組件都功能太強(qiáng)大或者沒(méi)有適合我的狭魂，所以就自己寫(xiě)了一個(gè)湊合著用，或許有人和我一樣需要這樣一個(gè)簡(jiǎn)單的分頁(yè)組件來(lái)實(shí)現(xiàn)簡(jiǎn)單的分頁(yè)功能党觅，我便在這里分享一下雌澄，大家自覺(jué)填坑咯。
如需高大上的組件仔役，可以移步Vue官方組件庫(kù)：https://github.com/vuejs/awesome-vue#libraries--plugins
BootPage是一款支持靜態(tài)數(shù)據(jù)和服務(wù)器數(shù)據(jù)的表格分頁(yè)組件掷伙，支持調(diào)整每頁(yè)顯示行數(shù)和頁(yè)碼顯示個(gè)數(shù)，樣式基于bootstrap又兵，就像這樣：
使用方法
在.vue的組件文件中我們這樣寫(xiě)template任柜，即html代碼：
<table class="table table-hover table-bordered">
<thead>
<tr>
<th width="10%">id</th>
<th width="30%">name</th>
<th width="40%">content</th>
<th width="20%">remark</th>
</tr>
</thead>
<tbody>
<tr v-for="data in tableList">
<td v-text="data.num"></td>
<td v-text="data.author"></td>
<td v-text="data.contents"></td>
<td v-text="data.remark"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<div class="pull-left">
<button class="btn btn-default" v-on:click="refresh">刷新</button>
</div>
<div class="pull-right">
<boot-page :async="false" :data="lists" :lens="lenArr" :page-len="pageLen" :param="param"></boot-page>
</div>
</td>
</tr>
</tfoot>
</table>
<boot-page>標(biāo)簽中async指是否從服務(wù)器端獲取數(shù)據(jù)，false為否沛厨；data為靜態(tài)的表格數(shù)據(jù)數(shù)組宙地；lens為每頁(yè)顯示行數(shù)的數(shù)組；page-len為可顯示的頁(yè)碼數(shù)逆皮；
使用靜態(tài)數(shù)據(jù)的javascript代碼即script標(biāo)簽內(nèi)的內(nèi)容如下：
<script>
import bootPage from './components/BootPage.vue'
export default {
data () {
return {
lenArr: [10, 50, 100], // 每頁(yè)顯示長(zhǎng)度設(shè)置
pageLen: 5, // 可顯示的分頁(yè)數(shù)
lists: [
{num: 1, author: 'luozh', contents: 'BootPage是一款支持靜態(tài)數(shù)據(jù)和服務(wù)器數(shù)據(jù)的表格分頁(yè)組件', remark: 'dsds'},
{num: 2, author: 'luozh', contents: '支持調(diào)整每頁(yè)顯示行數(shù)和頁(yè)碼顯示個(gè)數(shù)宅粥，樣式基于bootstrap', remark: 'dsds'},
{num: 3, author: 'luozh', contents: '<boot-page>標(biāo)簽中async指是否從服務(wù)器端獲取數(shù)據(jù)，false為否', remark: 'dsds'},
{num: 4, author: 'luozh', contents: 'data為靜態(tài)的表格數(shù)據(jù)數(shù)組电谣；', remark: 'dsds'},
{num: 5, author: 'luozh', contents: 'lens為每頁(yè)顯示行數(shù)的數(shù)組', remark: 'dsds'},
{num: 6, author: 'luozh', contents: 'page-len為可顯示的頁(yè)碼數(shù)', remark: 'dsds'},
{num: 7, author: 'luozh', contents: '服務(wù)器回傳參數(shù)為{data:[], page_num: 6}, 其中data為表格數(shù)據(jù)秽梅，page_num為總頁(yè)數(shù)', remark: 'dsds'},
{num: 8, author: 'luozh', contents: '可以調(diào)用this.$refs.page.refresh()刷新表格數(shù)據(jù)', remark: 'dsds'}
], // 表格原始數(shù)據(jù)抹蚀，使用服務(wù)器數(shù)據(jù)時(shí)無(wú)需使用
tableList: [] // 分頁(yè)組件傳回的分頁(yè)后數(shù)據(jù)
}
},
components: {
bootPage
},
events: {
// 分頁(yè)組件傳回的表格數(shù)據(jù)
'data' (data) {
this.tableList = data
}
}
}
</script>
一般我們很少使用靜態(tài)的表格數(shù)據(jù)，大多數(shù)應(yīng)用的數(shù)據(jù)都是從服務(wù)器端獲取的企垦，所以這里提供了獲取服務(wù)器分頁(yè)數(shù)據(jù)的方法：
使用服務(wù)器數(shù)據(jù)的組件HTML如下：
<boot-page v-ref:page :async="true" :lens="lenArr" :url="url" :page-len="pageLen" :param="param"></boot-page>
其中url為服務(wù)器的請(qǐng)求地址环壤；param為需要向服務(wù)器發(fā)送的參數(shù)對(duì)象；
使用服務(wù)器數(shù)據(jù)javascript的代碼如下：
<script>
import bootPage from './components/BootPage.vue'
export default {
data () {
return {
lenArr: [10, 50, 100], // 每頁(yè)顯示長(zhǎng)度設(shè)置
pageLen: 5, // 可顯示的分頁(yè)數(shù)
url: '/bootpage/', // 請(qǐng)求路徑
param: {}, // 向服務(wù)器傳遞參數(shù)
tableList: [] // 分頁(yè)組件傳回的分頁(yè)后數(shù)據(jù)
}
},
methods: {
refresh () {
this.$refs.page.refresh() // 這里提供了一個(gè)表格刷新功能
}
},
components: {
bootPage
},
events: {
// 分頁(yè)組件傳回的表格數(shù)據(jù)（這里即為服務(wù)器傳回的數(shù)據(jù)）
'data' (data) {
this.tableList = data
},
// 刷新數(shù)據(jù)
'refresh' () {
this.refresh()
}
}
}
</script>
注：服務(wù)器除了傳給組件表格的數(shù)組內(nèi)容钞诡，還需一個(gè)總頁(yè)數(shù)的鍵名郑现，名為page_num
組件自帶向服務(wù)器傳遞的參數(shù)為:
{
active: 1, // 當(dāng)前頁(yè)碼
length: 5 // 每頁(yè)顯示個(gè)數(shù)
}
服務(wù)器回傳的參數(shù)需為:
{
data: [], // 表格數(shù)據(jù)
page_num: 5 // 總頁(yè)數(shù)
}
組件源碼
至于分頁(yè)的實(shí)現(xiàn)源碼這里的就不展示了，所有源碼我都上傳到了我的github荧降，地址為：https://github.com/luozhihao/BootPage
這里事先提個(gè)醒：因?yàn)檫@個(gè)組件是我用幾個(gè)小時(shí)趕出來(lái)的接箫，所以對(duì)于Vue組件的編寫(xiě)格式和規(guī)范肯定是考慮不周的，沒(méi)有完全獨(dú)立出來(lái)朵诫，所以自覺(jué)填坑咯辛友，這里只作分享。
當(dāng)然你也可以隨意的修改組件的代碼來(lái)適合自己項(xiàng)目的使用拗窃，畢竟實(shí)現(xiàn)大而全的分頁(yè)組件還是比較復(fù)雜的瞎领。
