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

創(chuàng)新互聯(lián)建站是一家專注于網站設計、網站制作和成都服務器托管的網絡公司，有著豐富的建站經驗和案例。

具體代碼如下所示：

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

調用

// 分頁
import pages from 'components/common/pages/pages'
components: {
　　pages
 },

handleSizeChangeFun(v) {
　　this.pageSize = v;
　　this._enterpriseList(); //更新列表
},
handleCurrentChangeFun(v) { //頁面點擊
 　　this.pageNum = v; //當前頁
 　　this._enterpriseList(); //更新列表
}

補充：下面看下Element-ui組件--pagination分頁

一般寫后臺系統(tǒng)都會有很多的列表，有列表就相應的要用到分頁，根據(jù)項目中寫的幾個分頁寫一下我對分頁的理解，就當是學習筆記了。

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

以下是我自己在項目中用到的分頁