vue3 vxe-table树形表格实现数据项上移

在 Vue3 中使用 VxeTable 这款优秀的表格组件实现树形数据项上移功能，通常需要借助组件的 `move` 方法，它是 VxeTable 的列选项之一，用于处理行的拖动操作。以下是一个简单的步骤：

1. 首先，确保你在项目中已经安装了 VxeTable，并且在组件中导入它。

<template>
  <vxe-table :data="treeData" :columns="columns" @drag-end="handleDragEnd">
    <!-- ... -->
  </vxe-table>
</template>

<script>
import { ref } from 'vue';
import { Table } from 'vxe-table';

export default {
  components: {
    Table,
  },
  setup() {
    const treeData = ref([
      // 初始化你的树形数据结构
    ]);
    const columns = [
      { field: 'name', title: 'Name', type: 'default', moveable: true }, // 设置列可以移动
      // 其他列配置...
    ];

    function handleDragEnd({ event, oldIndex, newIndex }) {
      if (oldIndex > newIndex) {
        // 当前元素上移，将新位置的数据插入到旧位置之前
        const [parent] = treeData.value[newIndex].parent;
        parent.splice(newIndex + 1, 0, treeData.value[oldIndex]);
        parent.splice(oldIndex, 1);
      }
    }

    return {
      treeData,
      columns,
      handleDragEnd,
    };
  },
</script>

在这个例子中，当用户完成拖拽操作时，`handleDragEnd`函数会被触发。通过检查 `oldIndex` 和 `newIndex`，你可以判断出是否是上移操作，然后对数据数组进行相应的调整。