這篇文章主要為大家展示了“vue如何基于element-ui分頁(yè)組件封裝”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue如何基于element-ui分頁(yè)組件封裝”這篇文章吧。

我們擁有10多年網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)站建設(shè)經(jīng)驗(yàn)，從網(wǎng)站策劃到網(wǎng)站制作，我們的網(wǎng)頁(yè)設(shè)計(jì)師為您提供的解決方案。為企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、微信開發(fā)、成都微信小程序、成都手機(jī)網(wǎng)站制作、HTML5、等業(yè)務(wù)。無(wú)論您有什么樣的網(wǎng)站設(shè)計(jì)或者設(shè)計(jì)方案要求，我們都將富于創(chuàng)造性的提供專業(yè)設(shè)計(jì)服務(wù)并滿足您的需求。

具體代碼如下所示：

export default {
 components: {
 },
 data() {
  return {
  }
 },
 props: {
  pageSize: {
   type: Number,
   default: 10
  },
  total: {
   type: Number,
   default: 1
  }
 },
 watch: {
 },
 methods: {
  //每頁(yè)展示條數(shù)
  handleSizeChange(val) {
   //事件傳遞
   this.$emit('handleSizeChangeSub', val);
  },
  //當(dāng)前頁(yè)
  handleCurrentChange(val) {
   //事件傳遞
   this.$emit('handleCurrentChangeSub', val);
  }
 },
 // 過(guò)濾器設(shè)計(jì)目的就是用于簡(jiǎn)單的文本轉(zhuǎn)換
 filters: {},
 // 若要實(shí)現(xiàn)更復(fù)雜的數(shù)據(jù)變換，你應(yīng)該使用計(jì)算屬性
 computed: {
 },
 created() {
 },
 mounted() {},
 destroyed() {}
}

調(diào)用

// 分頁(yè)
import pages from 'components/common/pages/pages'
components: {
　　pages
 },

handleSizeChangeFun(v) {
　　this.pageSize = v;
　　this._enterpriseList(); //更新列表
},
handleCurrentChangeFun(v) { //頁(yè)面點(diǎn)擊
 　　this.pageNum = v; //當(dāng)前頁(yè)
 　　this._enterpriseList(); //更新列表
}

補(bǔ)充：下面看下Element-ui組件--pagination分頁(yè)

一般寫后臺(tái)系統(tǒng)都會(huì)有很多的列表，有列表就相應(yīng)的要用到分頁(yè)，根據(jù)項(xiàng)目中寫的幾個(gè)分頁(yè)寫一下我對(duì)分頁(yè)的理解，就當(dāng)是學(xué)習(xí)筆記了。

這是Element-ui提供的完整的例子

以下是我自己在項(xiàng)目中用到的分頁(yè)