如何在不重置分页的情况下刷新 b-table 组件？答案

【问题标题】：How to refresh b-table component without resetting the pagination?如何在不重置分页的情况下刷新 b-table 组件？
【发布时间】：2021-02-12 04:28:40
【问题描述】：

我目前正在将 Vue.js 框架与 buefy (0.9.2) 一起用于 UI 组件。这里的问题是当我单击删除图标时，b-table 组件有时不会在页面/ui 上更新（从表中删除该行）或当我单击添加新行按钮时。我可以确认操作（删除和添加行）本身工作正常。（我使用控制台日志和检查 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);   
            },

注意：我也尝试使用 key prop 并在删除行函数中增加这个 key 来强制刷新 b-table 组件，但这里的问题是它会将分页重置回第一页。那么应该我这样做是为了刷新 b-table 组件而不将分页重新设置回第一页？

【问题讨论】：

标签： vue.js vue-component vuex buefy

【解决方案1】：

我使用:key 属性重新渲染整个表格——这对我来说已经足够了。不确定分页（可能会以类似的方式解决）。代码示例：

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

和：

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

然后 - 当必须重新渲染表时，只需更改/更新密钥：

    if(refreshIsRequired) {
        this.tableDataKey++
    }

这将导致组件重绘。相同的方法可能适用于任何组件。

更多关于key-changing-technique 和一般key 属性的信息：understanding-the-key-attribute - Michael Thiessen

撰写的精彩文章

附： buefy v.0.9.2 与nuxtjs 一起使用v.2.15.0

【讨论】：