buefy b-table не переходит автоматически на следующую страницу при превышении значения :per-page?

Я использовал компонент b-table с атрибутом :per-page, установленным на 10. Проблема здесь в том, что когда я добавляю 11-ю строку в таблицу, строка добавляется, но текущая страница по-прежнему остается первой страницей.

 <b-button @click="addTableRow('compensationData', 'compensationData','compensationAmt')" class="is-radiusless">Add Effective Date</b-button>
    <b-table
      ref="compensationData"
      :data="this.objectData.compensationData"
      :hoverable="true"
      :paginated="true"
      :per-page="10"
      selectable
      @select="selected"
      detailed
      icon-pack="mdi"
      width="60%"
    
    >

Как автоматически перейти на следующую страницу, если на текущей странице добавлено более 10 страниц? Пожалуйста помоги?


vue.js buefy
person Horizon Zero Dawn    schedule 15.03.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Не существует автоматического способа смены страницы при добавлении новой строки.

Но вы можете проверить количество строк и соответственно установить текущую страницу.

    // template
    b-table(
        :current-page.sync="currentPage"
        :per-page="perPage"
    )

    // script
    data() {
        currentPage: 1,
        perPage: 10
    },
    methods: {
        whenNewRowIsAdded() {
            this.currentPage = Math.ceil(this.objectData.compensationData.length / this.perPage)
        }
    }
person Anurat Chapanond    schedule 15.03.2021