说明

Question

我正在通过Vue.js和Buefy开发前端。

我正在使用Buefy的表格按特定字段上的click事件进行排序。当然，默认情况下，我的表是按创建顺序排序的。（后端）我想做的是可以像现在这样在前端进行临时对齐。

这已经很完美了。但是，除非刷新它们，否则当前的列单击事件将不会返回默认的排序顺序（创建顺序）。

希望您能理解我的话。如果您需要其他代码或说明，请随时告诉我们。

感谢阅读。

我在等待您的帮助。

component.vue

<b-table :data="movies">
  <template slot-scope="props">
    <b-table-column centered="true" field="title" label="title" sortable>
      <strong>{{props.row.title}}<strong>
    </b-table-column>
    <b-table-column centered="true" field="content" label="content" sortable>
      <strong>{{props.row.content}}<strong>
    </b-table-column>
  <template>
</b-table>

Answer 1

使用Vue，您可以创建一个按钮来重新加载表格（以下说明）。

<button @click="resetSortKey = new Date().toLocaleString()">
  Clear sorting
</button>

<b-table
  :key="resetSortKey"
  <!-- ... -->
</btable>

别忘了在数据中初始化resetSortKey。

data() {
  return {
    resetSortKey = 0,
    // All your other stuff.
  }
}

说明

无论何时按下按钮，我们都会使用唯一值（日期/时间）更新resetSortKey的值。
我们在表上设置了键，以便在resetSortKey的值更改时重新加载键。每当重新加载表时，它将清除排序并将顺序恢复为默认值。

如何重置使用Vue.js单击Beufy表时发生的排序事件

1 个答案:

说明