element plus：tree拖动节点交换位置和改变层级

在Element Plus中，要实现Tree组件的拖动节点改变位置和层级，你需要使用<el-tree>组件的draggable属性来启用拖动功能，并监听node-drop事件来处理节点拖动后的逻辑。

以下是一个简单的例子，展示如何实现节点的拖动和层级变化：

<template>
  <el-tree
    :data="treeData"
    node-key="id"
    :props="defaultProps"
    draggable
    @node-drop="handleDrop"
  ></el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      treeData: [
        { id: 1, label: '一级 1', children: [{ id: 4, label: '二级 1-1' }] },
        { id: 2, label: '一级 2', children: [{ id: 5, label: '二级 2-1' }] },
        { id: 3, label: '一级 3', children: [{ id: 6, label: '二级 3-1' }] }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleDrop(draggingNode, dropNode, dropType, ev) {
      console.log('draggingNode', draggingNode);
      console.log('dropNode', dropNode);
      console.log('dropType', dropType);
      // 在这里编写逻辑以处理拖拽后的数据更新
      // 例如：移动节点位置，更新treeData
    }
  }
};
</script>

在这个例子中，draggable属性使树节点可拖动。handleDrop方法会在拖动操作完成时被调用，并提供了被拖动的节点信息、放置目标节点信息和放置类型。你可以在该方法中编写逻辑来更新treeData以反映新的层级关系。