自定义bootstrap-vue中的b分页

Question

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

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

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

我检查了boots-vue文档，没有用于自定义的插槽。关于如何自定义b分页组件有什么建议吗？

Answer 1

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

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>

它将产生以下分页效果：