1、從element-ui官網復制分頁代碼到項目中，修改對應的分頁參數為項目的真實數據，添加背景為藍底白字樣式。

<el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="page.page"
               :page-sizes="[1, 2, 3, 4]"
               :page-size="page.size"
               layout="total, sizes, prev, pager, next, jumper"
               :total="page.totalCount"
               background
               >     
</el-pagination>
<script>
    export default {
        data(){
            return {
                // 分頁
                page: {
                    page: 1,
                    size: 2,
                    totalCount: 20,
                    pageCount: 10,
                },
            }
        }
    }
</script>

生成的界面如下：

2、修改屬性，使上一頁和下一頁由原來的<和>為“上一頁”和“下一頁”，代碼如下

主要是修改屬性：prev-text和next-text

<el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="page.page"
               :page-sizes="[1, 2, 3, 4]"
               :page-size="page.size"
               layout="total, sizes, prev, pager, next, jumper"
               :total="page.totalCount"
               prev-text="上一頁"
               next-text="下一頁"
               background
               >
</el-pagination>

生成的界面如下：

3、添加首頁，尾頁，總頁數，代碼如下

操作方法：在layout中添加 slot（插槽），配置對應插槽信息。

注意：一個分頁組件只能實現一個插槽功能，layout中slot值要放在合適位置

有3個功能用了3個分頁組件，第一個組件實現總條數，第二個實現首頁，第三個實現了尾頁功能。

<div>
    <el-pagination
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="page.page"
                   :page-sizes="[1, 2, 3, 4]"
                   :page-size="page.size"
                   layout="total,slot, sizes"
                   :total="page.totalCount"
                   prev-text="上一頁"
                   next-text="下一頁"
                   background
                   >
        <span class="el-pagination__total">，共 {{ page.page }} / {{ page.pageCount }} 頁</span>
    </el-pagination>
    <el-pagination
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="page.page"
                   :page-sizes="[1, 2, 3, 4]"
                   :page-size="page.size"
                   layout="slot, prev, pager, next"
                   :total="page.totalCount"
                   prev-text="上一頁"
                   next-text="下一頁"
                   background
                   >
        <button :disabled="page.page == 1" @click="show(1)" class="btn-prev">
            首頁
        </button>
    </el-pagination>
    <el-pagination
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="page.page"
                   :page-sizes="[1, 2, 3, 4]"
                   :page-size="page.size"
                   layout="slot,jumper"
                   :total="page.totalCount"
                   prev-text="上一頁"
                   next-text="下一頁"
                   background
                   >
        <button
                :disabled="page.page == page.pageCount"
                @click="show(page.pageCount)"
                class="btn-prev"
                >
            尾頁
        </button>
    </el-pagination>
</div>

生成的界面如下：

上圖的問題是分頁組件換行了，可以自行設置樣式來解決，也可參考下面的代碼

4、添加首頁，尾頁，總頁數，分頁組件顯示在一行，代碼如下

操作方法：在分頁組件外層包裹一個div，設置它的樣式 style="display: flex"

<div style="display: flex">
    <el-pagination
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="page.page"
                   :page-sizes="[1, 2, 3, 4]"
                   :page-size="page.size"
                   layout="total,slot, sizes"
                   :total="page.totalCount"
                   prev-text="上一頁"
                   next-text="下一頁"
                   background
                   >
        <span class="el-pagination__total">，共 {{ page.page }} / {{ page.pageCount }} 頁</span>
    </el-pagination>
    <el-pagination
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="page.page"
                   :page-sizes="[1, 2, 3, 4]"
                   :page-size="page.size"
                   layout="slot, prev, pager, next"
                   :total="page.totalCount"
                   prev-text="上一頁"
                   next-text="下一頁"
                   background
                   >
        <button :disabled="page.page == 1" @click="show(1)" class="btn-prev">
            首頁
        </button>
    </el-pagination>
    <el-pagination
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="page.page"
                   :page-sizes="[1, 2, 3, 4]"
                   :page-size="page.size"
                   layout="slot,jumper"
                   :total="page.totalCount"
                   prev-text="上一頁"
                   next-text="下一頁"
                   background
                   >
        <button
                :disabled="page.page == page.pageCount"
                @click="show(page.pageCount)"
                class="btn-prev"
                >
            尾頁
        </button>
    </el-pagination>
</div>

生成的界面如下：