View UI （iview）表格拖拽排序

在使用 iView UI 的 Table 组件进行拖拽排序时，可以通过以下步骤获取最新的排序数据：

1. 启用拖拽功能

在 Table 组件上设置 draggable 属性，并绑定拖拽结束事件 @on-row-drop。

<template>
  <Table
    :columns="columns"
    :data="tableData"
    draggable
    @on-row-drop="handleRowDrop"
  ></Table>
</template>

2. 处理拖拽事件

在事件处理函数中，调整数据顺序并更新。

export default {
  data() {
    return {
      tableData: [/* 初始数据 */],
      columns: [/* 列配置 */]
    }
  },
  methods: {
    handleRowDrop({ oldIndex, newIndex }) {
      // 复制原数组避免直接修改
      const data = [...this.tableData];
      // 删除被拖拽的元素
      const item = data.splice(oldIndex, 1)[0];
      // 插入到新位置
      data.splice(newIndex, 0, item);
      // 更新数据（触发响应式更新）
      this.tableData = data;
      // 这里可以获取最新数据，比如提交到后端
      console.log('最新顺序:', this.tableData);
    }
  }
}

关键点说明：

1. 索引获取：@on-row-drop 事件会返回 oldIndex 和 newIndex，分别表示拖拽起始位置和目标位置。

2. 数组操作：使用 splice 方法移动数组元素，保持数据不变性。

3. 响应式更新：直接替换 this.tableData 会触发 Vue 的响应式更新，无需额外操作。