在 bootstrap-vue 中自定义 b-pagination

Question

我正在使用 bootstrap-vue。对于分页，我使用了带有以下代码的 b-pagination 组件：

<b-pagination
    v-model="currentPage"
    :total-rows="rows"
    :per-page="perpage"
    aria-controls="my-table">
</b-pagination>

它工作正常。但是，我还想在分页之前添加总行数。下图就是我要实现的。

我查看了bootstrap-vue文档，没有自定义的slot。对如何自定义 b-pagination 组件有什么建议吗？

Answer 1

下面的

Link可以解决这个问题。

https://bootstrap-vue.js.org/docs/components/pagination/#pagination

Answer 2

终于是一道看似简单的CSS题了。下面的代码将分页部分和总页数部分结合起来。

   <div style="display: flex;margin:0;padding:0;width:400px;">
        <div style="margin:0;padding:0;width:300px;">
            <b-pagination
                v-model="currentPage"
                :total-rows="rows"
                :per-page="perpage"
                aria-controls="my-table">
            </b-pagination>
        </div>
        <div style="margin:auto;text-align: left;">
            <ul  class="pagination">
                <li class="page-item active"><a class="page-link">Total {{rows}}</a></li>
            </ul>
        </div>
    </div>

并且会生成如下分页效果：

在 bootstrap-vue 中自定义 b-pagination

Customize the b-pagination in bootstrap-vue

vue.js

bootstrap-vue