elementUI 中el-pagination控件不能直接添加首頁和尾頁，但是el-pagination支持自定義內(nèi)容焊虏，需要在 layout 中列出 slot廓块，也就是通過插槽來擴(kuò)展分頁顯示的內(nèi)容，具體代碼寫法如下：

<el-pagination
      layout="slot, prev, pager, next, slot"
      :page-size="rows"
      :total="total"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage">
      <el-button :disabled="firstDisabled" @click="toFirstPage">首頁</el-button>
      <el-button :disabled="isLastDisabled" @click="toLastPage">尾頁</el-button>
    </el-pagination>

使用插槽來擴(kuò)展添加首頁和尾頁的時候炸庞，會有如下問題：

• 問題1：slot只支持一個惯疙，也就是說只能寫一個翠勉，如果寫多個slot的時候，都會以第一個控件來添加螟碎，也就是說上面的代碼只能顯示出兩個首頁眉菱，而無法顯示出尾頁迹栓，原因可以通過查看源代碼來分析

slot: <my-slot></my-slot>

MySlot: {
  render(h) {
      return (
          this.$parent.$slots.default ? this.$parent.$slots.default[0] : ''
      );
  }
}

解決辦法就是使用兩個分頁控件el-pagination來拼接處一個完成的分頁功能掉分，每個分頁控件上寫一個slot俭缓，代碼如下：

    <div>
      <el-pagination
        layout="slot, prev, pager, next"
        :page-size="rows"
        :total="total"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage">
        <el-button :disabled="firstDisabled" @click="toFirstPage" size="mini">首頁</el-button>
      </el-pagination>

      <el-pagination
        layout="slot, jumper"
        :page-size="rows"
        :total="total"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage">
        <el-button :disabled="isLastDisabled" @click="toLastPage" size="mini">尾頁</el-button>
      </el-pagination>
    </div>

• 問題2：el-botton按鈕通過slot顯示在分頁控件中之后發(fā)現(xiàn):disabled='firstDisabled'，當(dāng)firstDisabled發(fā)生變化時酥郭，el-button的disabled屬性無法更改华坦，這塊問題的具體原因還沒有找到，如果有知道的大神不从，請幫忙解釋一下惜姐。

最后的解決方案就是使用兩個el-button按鈕，首頁和尾頁椿息。代碼如下：

• 創(chuàng)建一個通用Page組件歹袁，將分頁部分單獨(dú)提出來放到組件中。

<template>
  <div>
    <el-button :disabled="firstDisabled" @click="toFirstPage" size="mini">首頁</el-button>
    <el-pagination
      layout="prev, pager, next"
      :page-size="rows"
      :total="total"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      style="display: inline-block;padding-right: 0px;">
    </el-pagination>
    <el-button :disabled="isLastDisabled" @click="toLastPage" size="mini">尾頁</el-button>
    <el-pagination
      layout="jumper"
      :page-size="rows"
      :total="total"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      style="display: inline-block;padding-left: 0px;">
    </el-pagination>
  </div>
</template>

    export default {
      data () {
        return {
          totalPage: Math.ceil(this.total / this.rows),
          firstDisabled: true
        }
      },
      props: {
        currentPage: {
          type: Number,
          default: 1
        },
        rows: {
          type: Number,
          default: 10
        },
        total: {
          type: Number,
          default: 0
        }
      },
      methods: {
        handleCurrentChange (page) {
          this.firstDisabled = page == 1 ? true : false;
          this.$emit("handleCurrentChangeSub", page);
        },
        toFirstPage () {
          this.handleCurrentChange(1);
        },
        toLastPage () {
          this.currentPage = this.totalPage;
          this.handleCurrentChange(this.totalPage);
        }
      },
      watch: {
        total(val) {
          this.total = val;
          this.totalPage = Math.ceil(val / this.rows);
        }
      },
      computed : {
        isLastDisabled () {
          if(this.totalPage <= 0){
            return true;
          }
          return this.currentPage == this.totalPage ? true : false;
        }
      }
    }

import Page from '../../components/Page'

components: {
    Page
}

<Page :currentPage="queryData.page" :rows="queryData.rows" :total="total" @handleCurrentChangeSub="handleCurrentChange"/>