在上一篇中，我們針對表格進行了封裝，使得我們的開發(fā)效率有了一個小小的提升，今天再帶大家來對分頁進行封裝。這樣我們表格加分頁就組成了一個完整的功能封裝。
我們都知道，element官網(wǎng)提供的分頁提供了兩個重要的屬性，page-size（每頁顯示條目個數(shù)）和current-page（當前頁數(shù)），并且都支持.sync屬性。.sync我們熟悉vue的同學都知道，這是官方為我們提供的福利屬性，讓我們能夠?qū)崿F(xiàn)同時多個雙向綁定，這也為我們實現(xiàn)分頁等需要同時多個雙向綁定的組件帶來了很大的幫助，減少了許多開發(fā)難度。
同時，我們應該有想到，我們在進行每一次條目和當前頁數(shù)的改變時，會改變父組件傳遞過來的數(shù)值，這種直接修改是不符合vue單向數(shù)據(jù)流的思想的，這個時候，我們這里用到官網(wǎng)給與的建議------使用這個 prop 的值來定義一個計算屬性的方式來解決。
QQ截圖20201110101000.png
如圖，我們建立了2個表格，兩個表格攜帶著分頁他就向你走來了，而你只需要傳兩個不同的config就好了
QQ截圖20201110101143.png
我們的分頁組件很簡單，只需要把官網(wǎng)的幾個常用屬性變成你的prop就好了。
<template>
<div class="pagination">
<el-pagination
background
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:layout="layout"
:page-sizes="pageSizes"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
export default {
name: 'Pagination',
props: {
total: {
required: true,
type: Number
},//數(shù)據(jù)總數(shù)
page: {
type: Number,
default: 1
},//當前頁數(shù)
entry: {
type: Number,
default: 5
},//每頁顯示條目個數(shù)
pageSizes: {
type: Array,
default() {
return [5,10, 20, 30, 50]
}
},//設置一次展示多少行數(shù)據(jù)
layout: {
type: String,
default: 'total, sizes, prev, pager, next, jumper'
},//分頁的構成，例如是否添加上一頁下一頁，是否支持輸入跳轉(zhuǎn)
},
computed: {
currentPage: {
get() {
return this.page
},
set(val) {
this.$emit('update:page', val)
}
},//利用計算屬性來重置普攻。讓我們可以改變父組件傳遞過來的分頁頁數(shù)和條目
pageSize: {
get() {
return this.entry
},
set(val) {
this.$emit('update:entry', val)
}
}
},
methods: {
//改變分頁頁數(shù)和條目，通知父組件做相應的數(shù)據(jù)改變
sizeChange(val) {
this.$emit('pagechange', { page: this.currentPage, entry: val })
},
entryChange(val) {
this.$emit('pagechange', { page: val, entry: this.pageSize })
}
}
}
</script>
我們這個分頁引入在昨天封裝的table組件中
<template>
<div>
<el-table
class="customer"
:data="tableData"
style="width: 100%">
<!-- 循環(huán)表頭數(shù)據(jù)，判斷列顯示類型 -->
<template v-for="(col,index) in tableHeader">
<!-- 多選框 -->
<el-table-column v-if="col.type == 'selection'" :label="col.label" :type="col.type" :width="col.width"></el-table-column>
<!-- 索引行 -->
<el-table-column v-else-if="col.type == 'index'" :label="col.label" :type="col.type" :width="col.width"></el-table-column>
<el-table-column v-else-if="col.type == 'image'" :label="col.label" :width="col.width" :prop="col.prop">
<template slot-scope="scope">
<div class="content-image"><img :src="scope.row[col.prop]"/></div>
</template>
</el-table-column>
<el-table-column v-else-if="col.type == 'date'" :label="col.label" :width="col.width" :min-prop="col.prop">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row[col.prop] }}</span>
</template>
</el-table-column>
<el-table-column v-else-if="col.type == 'handle'" :label="col.label" :min-width="col.width" :fixed="col.fixed">
<template slot-scope="scope">
<slot name="handles" :col="scope.row"></slot>
</template>
</el-table-column>
<el-table-column v-else :label="col.label" :min-width="col.width" :prop="col.prop" :formatter="col.formatter?col.formatter:null">
</el-table-column>
</template>
</el-table>
<pagination v-show="config.total>0" :total="config.total" v-on="$listeners" :page.sync="config.searchList.page" :entry.sync="config.searchList.pageSize" />
</div>
</template>
<script>
import Pagination from '../Pagination/index.vue'
export default {
name:'DynamicTable',
components:{Pagination},
props:{
config:{
type:Object,
default:()=>{}
},
tableHeader:{
type:Array,
default:()=>[]
},
tableData:{
type:Array,
default:()=>[]
}
}
}
</script>
細心的小伙伴兒發(fā)現(xiàn)，誒，你這個分頁沒有通知分頁變化改變數(shù)據(jù)的方法呀？？多了個v-on=“listeners和$attrs是vue提供的 property，一個是prop傳遞，一個是事件傳遞。這樣我們就可以把在分頁組件中定義好的分頁方法通知父級組件來進行數(shù)據(jù)改變
<template>
<div class="pages-container">
<dynamic-table :tableHeader="tableHeader" :tableData="tableData" :config="config" @pagechange="getList($event)">
<template v-slot:handles="t">
<el-button-group>
<el-link type="primary" @click="edit(t)" icon="el-icon-edit">編輯</el-link>
<el-link type="danger" @click="deleteId(t)">刪除<i class="el-icon-delete el-icon--right"></i> </el-link>
</el-button-group>
</template>
</dynamic-table>
<dynamic-table style="margin-top: 15px;" :tableHeader="tableHeader2" :tableData="tableData2" :config="config2" @pagechange="getList($event)">
<template v-slot:handles="t">
<el-button-group>
<el-link type="success" @click="watch(t)" icon="el-icon-view">查看</el-link>
<el-link type="warning" @click="publish(t)">發(fā)布<i class="el-icon-finished el-icon--right"></i> </el-link>
</el-button-group>
</template>
</dynamic-table>
</div>
</template>
我們看到，這里我們直接調(diào)用了pagetion組件中的分頁方法，然后我們拿到分頁頁數(shù)和條目，調(diào)用拉取列表的方法就好了。
呂某人這里只是對表格和分頁進行了基礎封裝。有需要loading等更多效果和屬性的可以自行進行添加，這里不再贅述，感覺對你有幫助的小伙伴，幫忙點個贊吧，碼文不易，謝謝點贊！
