Настройте b-нумерацию в bootstrap-vue

Question

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

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

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

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

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 / документы / компоненты / нумерация страниц / # нумерация страниц