文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在不重置分页的情况下刷新b表组件？

问如何在不重置分页的情况下刷新b表组件？
EN

Stack Overflow用户

提问于 2020-10-30 01:11:30

回答 1查看 454关注 0票数 1

我目前使用的是Vue.js框架和buefy (0.9.2)，因为这里的UI components.The问题是，当我单击删除图标(从表中删除该行)或单击add new row按钮时，页面/ui上的b-table组件有时不会更新。我可以确认操作(删除和添加行)本身工作正常。(我使用控制台日志和检查vuex store.Its来验证这一点，只是更改没有反映在页面/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);   
            },

注意:我也尝试过使用一个键属性并在delete row函数中增加这个键来强制刷新b- page.So组件，但是这里的问题是它将分页重置回第一页，我应该怎么做才能刷新b-表组件而不将分页重新设置回第一页？

vue-component

vuex

buefy

vue.js

回答 1

Stack Overflow用户

发布于 2021-05-15 18:23:13

我使用: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撰写的优秀文章

与nuxtjs v.2.15.0配合使用的P.S. buefy v.0.9.2

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64596022

复制

相似问题

问如何在不重置分页的情况下刷新b表组件？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在不重置分页的情况下刷新b表组件？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在不重置分页的情况下刷新b表组件？
EN