element-ui tree 实现同级拖拽

<template>
  <div>
    <el-tree
      draggable
      :allow-drop="allowDrop"
      @node-drop="sort"
      ref="tree"
      :data="data2"
      :props="defaultProps"
      show-checkbox
      default-expand-all
      node-key="id"
      highlight-current
    ></el-tree>

    <div class="buttons">
      <el-button @click="getCheckedNodes">通过 node 获取</el-button>
      <el-button @click="getCheckedKeys">通过 key 获取</el-button>
      <el-button @click="setCheckedNodes">通过 node 设置</el-button>
      <el-button @click="setCheckedKeys">通过 key 设置</el-button>
      <el-button @click="resetChecked">清空</el-button>
    </div>
  </div>
</template>

<script>
// import draggable from "vuedraggable";
// import Sortable from "sortablejs";
export default {
  methods: {
    getCheckedNodes() {
      console.log(this.$refs.tree.getCheckedNodes());
    },
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys());
    },
    setCheckedNodes() {
      this.$refs.tree.setCheckedNodes([
        {
          id: 5,
          label: "二级 2-1"
        },
        {
          id: 9,
          label: "三级 1-1-1"
        }
      ]);
    },
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([3]);
    },
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    }
  },
  mounted() {
    const el = document.querySelectorAll(".el-tree")[0];
    console.log(el);
  },
  data() {
    return {
      data2: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              prop: "4"
            }
          ]
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
              prop: "5"
            },
            {
              id: 6,
              label: "二级 2-2",
              prop: "6"
            }
          ]
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
              prop: "7"
            },
            {
              id: 8,
              label: "二级 3-2",
              prop: "9"
            }
          ]
        },
        {
          id: 9,
          label: "一级4"
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      allowDrop(draggingNode, dropNode, type) {
        if (draggingNode.level === dropNode.level) {
          if (draggingNode.parent.id === dropNode.parent.id) {
            // 向上拖拽 || 向下拖拽
            return type === "prev" || type === "next";
          }
        } else {
          // 不同级进行处理
          return false;
        }
      },
      sort(draggingNode, dropNode, type, event) {
        // console.log('排序')
        // console.log("<><><>>><><<><><><><><><><>")
        //  拖拽之后的重新组合的数组
        // console.log(dropNode.parent); //dropNode.parent.childNodes =[]
        let obj = {
          aboveId: "",
          arr: []
        };
        obj.aboveId = dropNode.data.aboveId;
        for (let item of dropNode.parent.childNodes) {
          obj.arr.push(item.data.id);
        }
      }
    };
  }
};
</script>