从 Buefy 表中获取新排序的数据答案

【问题标题】：Get newly ordered data from Buefy table从 Buefy 表中获取新排序的数据
【发布时间】：2020-05-25 01:39:28
【问题描述】：

我有一个已实现拖放的 Buefy 表 https://buefy.org/documentation/table#draggable-rows

我的表只有一列。因此，在用户按照他们想要的顺序拖动行之后，我让他们单击保存按钮，然后单击我想按照用户放入它们的确切顺序从表中获取数据。我参考了我的表：

<b-table ref="reorder"
  v-sortable="sortableOptions"
  :data="data"
  :columns="columns"
  hoverable
  striped>
</b-table>

这是数据：

  columns: [
      {
        field: "item",
        label: "Name"
      }
    ],
  data:[{item:'row 1'},
        {item:'row 2'},
        {item:'row 3'}]

在我的按钮点击事件中，我有：

refreshTable() {
  let tbl = this.$refs.reorder
},

我在this.$refs.reorder中看到了一个数据对象，但是顺序和创建表时传入的数据的顺序是一样的。我需要按照用户在完成拖放行后放入的新创建顺序从表中获取数据。如何以新排序的顺序获取数据？谢谢

【问题讨论】：

标签： vue.js buefy

【解决方案1】：

看起来您必须处理拖动事件才能手动反映数据中的更改。

例如，添加一个数据属性来保存被拖动行的索引，例如

data: () => ({
  columns: [{
    field: "item",
    label: "Name"
  }],
  data:[
    {item:'row 1'},
    {item:'row 2'},
    {item:'row 3'}
  ],
  draggingRowIndex: null // ? add this
})

以及处理dragstart 和drop 事件的方法

methods: {
  dragstart (payload) {
    this.draggingRowIndex= payload.index
  },
  drop (payload) {
    // move the dragged row
    this.data.splice(payload.index, 0,
        ...this.data.splice(this.draggingRowIndex, 1))
  }
}

然后将这些绑定到<b-table> 事件

<b-table @dragstart="dragstart" @drop="drop"...>

【讨论】：