Как обновить компонент b-таблицы без сброса нумерации страниц?

В настоящее время я использую фреймворк Vue.js вместе с buefy (0.9.2) для компонентов пользовательского интерфейса. Проблема в том, что компонент b-table иногда не обновляется на странице / пользовательском интерфейсе, когда я нажимаю значок удаления (удаляет это строку из таблицы) или когда я нажимаю кнопку добавления новой строки. Я могу подтвердить, что сами операции (удаление и добавление строки) работают безупречно (я проверил это с помощью журнала консоли, а также проверив хранилище vuex, просто изменение не отражается на странице / ui.

Пример шаблона-

 <b-table
      ref="records"
      :data="this.objectData.records"
      :hoverable="true"
      :paginated="true"
      :per-page="10"
      selectable
      @select="selected"
      detailed
      :show-detail-icon="true"
      icon-pack="mdi"
      custom-row-key="id"
    >  
  <b-table-column   v-slot="props" field="effectiveDate" label="Eff Date">{{ props.row.effectiveDate }}</b-table-column>
        <b-table-column   v-slot="props" field="jobType" label="Job Type">{{ props.row.jobType }}</b-table-column>
        <b-table-column   v-slot="props" field="action" label="Action">{{ props.row.action }}</b-table-column>   
        <b-table-column   v-slot="props">
          <b-button class="is-borderless is-borderless" @click="deleteTableRow('records','records',props.index)">
            <b-icon icon="delete"></b-icon>
          </b-button>        
        </b-table-column>

функция, выполняющая операцию удаления строки -

 deleteTableRow(tableRef, dataCol, index) {
                this.objectData[dataCol].splice(index, 1);   
            },

ПРИМЕЧАНИЕ: Я также пробовал использовать опору ключа и увеличивать этот ключ в функции удаления строки, чтобы принудительно обновить компонент b-таблицы, но проблема здесь в том, что он сбрасывает разбиение на страницы обратно на 1-ю страницу. Итак, что мне делать в чтобы обновить компонент b-таблицы без повторной установки нумерации страниц на 1-ю страницу?


vue.js vuex buefy vue-component
person Vignesh Swaminathan    schedule 29.10.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я использовал свойство :key для повторного рендеринга всей таблицы - этого было достаточно для моего случая. Не уверен в разбивке на страницы (возможно, можно решить аналогичным образом). Пример кода:

  data () {
    return {
      tableDataKey: 0,
      ...

а также:

    <b-table
      ref="table"
      :key="tableDataKey"
      :data="tableData"
      ...

затем - когда таблица должна быть перерисована, просто измените / обновите ключ:

    if(refreshIsRequired) {
        this.tableDataKey++
    }

это вызовет перерисовку компонента. Тот же подход можно применить к любому компоненту.

Подробнее об технике смены ключей и в целом об атрибуте key в: понимание-атрибут-ключа - отличные статьи, написанные Майклом Тиссеном

P.S. buefy v.0.9.2 используется с nuxtjs v.2.15.0

person Taras Buha    schedule 15.05.2021