0

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

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

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

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

谢谢阅读。

我在等你的帮助。

组件.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>
4

1 回答 1

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.
  }
}

解释

  1. resetSortKey每当按下按钮时，我们都会使用唯一值（日期/时间）更新 的值。

  2. 我们在表上设置键，以便在值resetSortKey更改时重新加载。每当表重新加载时，它将清除排序并将顺序恢复为默认值。

于 2020-05-27T02:30:25.033 回答