這幾天在做一個管理系統，然後遇到了一個分頁的問題，因為一開始就是用vue結合elementui開發的，所以分頁就用到了elementui的分頁功能，但是官網給的例子不符合我開發的需求，所以呢，就需要進行改造，關鍵是怎麼改造呢，
重點來了slot插槽

上面的圖片， 展示的是我這次要實現的效果，我看了官網的，有一個跟我的很像，但還是有區別

現在呢，我們就根據這個程式碼進行改造哈
直接附上我的程式碼了哈，困了，有不懂的可以留言，

     <div class="block">
            <el-pagination  background  @size-change
 
="handleSizeChange"   @current-change="handleCurrentChange" :current-page="currentPage"  :page-size="pageSize" layout="total, sizes, slot,prev" :total="total">
                        <div class="first-pager" @click="jumpPage('1')">首頁</div>
            </el-pagination>
            <
 
el-pagination  background  @size-change="handleSizeChange"   @current-change="handleCurrentChange" :current-page="currentPage"  :page-size="pageSize" layout="pager,next,slot, jumper" :total="total">
                        <div class="last-pager" @click="jumpPage('0')">末頁</div>
            <
 
/el-pagination>
            <el-pagination  background  @size-change="handleSizeChange"   @current-change="handleCurrentChange" :current-page="currentPage"  :page-size="pageSize" layout="slot" :total="total">
                        <div class="ensure-btn" @click="clickEnter()">確定</div>
            </el-pagination>
      </div>

js部分

 jumpPage(val){
          switch(val){
              case "1"://跳轉到首頁
                    this.$emit('changeCurrentPage', 1);
                    break;
              case "0"://跳轉到末頁
                    this.$emit('changeCurrentPage', this.total/this.pageSize);
                    break;
            }
      },
      clickEnter(){
            this.$emit('changeCurrentPage', this.currentPage);
      }

還是得說一下，我是把分頁的單獨作為一個元件，然後進行呼叫的，所以引用的時候，會用到元件之間的傳值的知識點，
不懂的，看我前面的部落格，地址元件之間傳值，這個裡面只是提到了父子元件直接傳值，其實還有一個方式，就是vuex，具體的自己看官網咖，講的挺詳細的。
over