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

它工作得很好。但是，我还想在分页之前添加总行计数。下面的图片是我想要实现的。

​

​

我检查了bootstrap-vue文档，没有可供定制的插槽。有什么建议如何定制b分页组件吗？

Answer 1

最后，这似乎是一个简单的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>

它会产生如下的分页效果：

​

Answer 2

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

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