el-tree-transfer中slot的用法

`el-tree-transfer`是Element UI库中的一个组件，用于实现树形结构的数据拖拽操作，比如从源节点到目标节点的批量转移。这个组件提供了一些内置的`slot`（插槽）供开发者自定义其样式和内容。

以下是几个重要的`slot`及其用法：

1. `header` slot: 这个插槽用于设置每个层级的标题行。你可以在这里放置HTML元素或指令，显示节点的名称或者其他信息。

<template>
  <el-tree :data="treeData" :props="{ children: 'children', label: 'name' }">
    <span v-slot="node" slot="header">{{ node.label }}</span>
  </el-tree>
</template>

2. `drop-node` slot: 当拖拽节点悬停在其他节点上时，可以在这个插槽里添加自定义的内容或处理逻辑。

<template>
  <el-tree :data="treeData" :transfer="true">
    <div v-slot="dragNodeSlot" slot="drop-node" class="draggable-node">
      <span>{{ dragNodeSlot.node.name }} (Dragged)</span>
    </div>
  </el-tree>
</template>

3. `empty` slot: 如果数据为空，这个插槽会被渲染出来展示空状态的提示。

<template>
  <el-tree :data="treeData" :empty="showEmptyMessage" :transfer="true">
    <template #empty>
      <p>There are no items to transfer.</p>
    </template>
  </el-tree>
</template>