Блог

Я использую bootstrap-vue. Для разбивки на страницы я использовал компонент b-разбивки на страницы со следующим кодом:

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

Это работает нормально.
Тем не менее, я также хочу добавить общее количество строк перед нумерацией страниц. Следующая картинка — это то, чего я хочу достичь.

Я проверил документ bootstrap-vue, там нет слота для настройки. Есть предложения, как настроить компонент b-разбивки на страницы?

Наконец, это, кажется, простой вопрос 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>
  

И это приведет к следующему эффекту разбивки на страницы:

Ссылка ниже может решить проблему.

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