element plus实现将el-tree中的元素拖动到div中并写入

Element Plus是一个基于Vue.js的UI组件库，它提供了丰富的组件和易用的API，可以方便地构建前端应用。在Element Plus中，要实现在`el-tree`（树形组件）中拖放节点并且将其内容添加到`div`中，你可以使用其内置的`draggable`和`v-model`特性，以及一些自定义事件处理。

首先，你需要确保在项目中已经安装了Element Plus，并引入了相关的组件。然后，设置`el-tree`为可拖动：

<template>
  <div>
    <el-tree
      :data="treeData"
      :props="defaultProps"
      draggable
      @drop="handleDrop"
    ></el-tree>
    <div ref="container" v-draggable="{ group: 'nodeGroup', onEnd: handleDragEnd }"></div>
  </div>
</template>

<script>
import { ElTree, ref, onMounted } from "element-plus";

export default {
  components: {
    ElTree,
  },
  data() {
    return {
      treeData: [], // 树的数据源
      defaultProps: {}, // el-tree的默认属性配置
      draggedNode: null, // 拖动的节点引用
    };
  },
  methods: {
    handleDrop(event) {
      const droppedElement = event.target; // 获取掉落到的目标div
      const droppedValue = event.dataTransfer.getData('text/plain'); // 获取拖动数据
      this.$set(this.draggedNode, 'parent', droppedElement); // 将节点移动到div
      droppedElement.append(droppedValue); // 写入div
    },
    handleDragEnd(event) {
      this.draggedNode = null;
    },
    ... // 其他必要的事件处理函数
  },
};
</script>

在这个例子中，`handleDrop`方法会在拖放操作结束后触发，获取目标`div`和拖动的数据，然后更新树结构并将数据插入到div中。`handleDragEnd`用于清除当前拖动状态。

记得在`data`和`methods`中初始化你的`treeData`，定义节点的结构，以及设置其他必要的事件处理器。