vue项目 使用SortableJs拖拽树形排序，树形添加、删除、编辑

要在Vue项目中使用SortableJs实现树形拖拽排序，并添加、删除、编辑节点的功能，你可以使用vue-draggable-tree组件。以下是一个简单的示例：

1. 安装vue-draggable-tree：

npm install vue-draggable-tree --save

2. 在你的Vue组件中使用它：

<template>
  <div>
    <draggable-tree :data="treeData" @change="handleChange">
      <!-- 自定义节点内容 -->
      <template v-slot="{ node, edit }">
        <div>
          <span>{{ node.name }}</span>
          <button @click="edit.enable">编辑</button>
          <button @click="addChild(node)">添加子节点</button>
          <button @click="deleteNode(node)">删除</button>
        </div>
      </template>
    </draggable-tree>
  </div>
</template>
 
<script>
import DraggableTree from 'vue-draggable-tree'
 
export default {
  components: {
    DraggableTree
  },
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: '节点1',
          children: [
            { id: 2, name: '节点1-1' },
            { id: 3, name: '节点1-2' }
          ]
        },
        {
          id: 4,
          name: '节点2'
        }
      ]
    }
  },
  methods: {
    handleChange(newTreeData) {
      // 更新树形结构数据
      this.treeData = newTreeData;
    },
    addChild(node) {
      // 添加子节点的逻辑
      const newNode = { id: generateUniqueId(), name: '新节点' };
      this.$set(node, 'children', node.children || []);
      node.children.push(newNode);
    },
    deleteNode(node) {
      // 删除节点的逻辑
      const parent = this.getParent(this.treeData, node.id);
      if (parent) {
        const index = parent.children.findIndex(child => child.id === node.id);
        parent.children.splice(index, 1);
      }
    },
    getParent(nodes, id) {
      for (let i = 0; i < nodes.length; i++) {
        if (nodes[i].children && nodes[i].children.find(child => child.id === id)) {
          return nodes[i];
        }
      }
      return null;
    }
  }
}
 
function generateUniqueId() {
  return Math.random().toString(36).substring(2, 15);
}
</script>

在这个示例中，vue-draggable-tree组件用于显示树形结构，并支持拖拽排序。你可以通过插槽自定义每个节点的内容，包括添加、删除和编辑按钮。拖拽操作由SortableJs在内部处理，而添加、删除节点的逻辑则需要你自己实现。这个例子提供了添加和删除节点的简单逻辑，你可以根据实际需求进一步完善。