vuedraggable树形拖拽

VueDraggable也支持树形拖拽，可以用它来实现树形结构的排序和拖拽。下面是一个简单的示例代码，演示如何使用VueDraggable实现树形拖拽：

<template>
  <div>
    <h2>可拖拽树形列表</h2>
    <draggable v-model="treeData" :options="dragOptions">
      <template v-slot="{ item, index }">
        <div :class="{ 'tree-node': true, 'tree-node--root': item.depth === 0, 'tree-node--leaf': !item.children }">
          <div class="tree-node__content">
            {{ item.label }}
          </div>
          <div class="tree-node__children" v-if="item.children">
            <draggable :list="item.children" :options="dragOptions">
              <template v-for="(subItem, subIndex) in item.children" :key="subItem.id">
                <div :class="{ 'tree-node': true, 'tree-node--leaf': !subItem.children }">
                  <div class="tree-node__content">
                    {{ subItem.label }}
                  </div>
                  <div class="tree-node__children" v-if="subItem.children">
                    <draggable :list="subItem.children" :options="dragOptions"></draggable>
                  </div>
                </div>
              </template>
            </draggable>
          </div>
        </div>
      </template>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data () {
    return {
      treeData: [
        {
          id: 1,
          label: '节点1',
          children: [
            {
              id: 2,
              label: '节点1-1'
            },
            {
              id: 3,
              label: '节点1-2',
              children: [
                {
                  id: 4,
                  label: '节点1-2-1'
                },
                {
                  id: 5,
                  label: '节点1-2-2'
                }
              ]
            },
            {
              id: 6,
              label: '节点1-3'
            }
          ]
        },
        {
          id: 7,
          label: '节点2'
        },
        {
          id: 8,
          label: '节点3'
        }
      ],
      dragOptions: {
        group: 'tree',
        ghostClass: 'tree-node--ghost',
        handle: '.tree-node__content'
      }
    }
  }
}
</script>

在上面的代码中，我们使用了嵌套的VueDraggable组件来实现树形结构的排序和拖拽。我们为每个节点设置了一个唯一的id属性，并使用v-for指令循环渲染每个节点。在每个节点中，我们使用v-if指令来判断是否有子节点，并根据情况渲染子节点。我们还为每个节点设置了一个深度属性，以便在样式中区分不同层级的节点。

我们还定义了一个dragOptions对象，用来设置拖拽的选项，包括分组、样式、句柄等。这样就可以实现树形拖拽功能了。