在 bootstrap-vue 中自定义 b 分页

Posted 2023-02-22

【中文标题】在 bootstrap-vue 中自定义 b 分页

【英文标题】：Customize the b-pagination in bootstrap-vue

【发布时间】：2019-09-04 11:33:55

【问题描述】：

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

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

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

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

【参考方案1】：

下面的链接可以解决问题。

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

【参考方案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>

并且会产生如下的分页效果：