vue elementUI el-pagination控件添加首页和尾页

elementUI 中el-pagination控件不能直接添加首页和尾页，但是el-pagination支持自定义内容，需要在 layout 中列出 slot，也就是通过插槽来扩展分页显示的内容，具体代码写法如下：

<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>

使用插槽来扩展添加首页和尾页的时候，会有如下问题：

• 问题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显示在分页控件中之后发现:disabled='firstDisabled'，当firstDisabled发生变化时，el-button的disabled属性无法更改，这块问题的具体原因还没有找到，如果有知道的大神，请帮忙解释一下。

最后的解决方案就是使用两个el-button按钮，首页和尾页。代码如下：

• 创建一个通用Page组件，将分页部分单独提出来放到组件中。

<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"/>