Vue-draggable

安装

 npm i -P he-tree-vue@2 

<template>
  <div class="main-content">
    <Tree :value="treeData" triggerClass="drag-trigger">
      <span slot-scope="{ node, index, path, tree }">
        <b @click="tree.toggleFold(node, path)">
          {{ node.$folded ? "+" : "-" }}
        </b>
        <span
          class="note-content"
          :class="{choosed_note:node.id == chooseFolderId}"
          @click="chooseCaseFolder(node, path)"
        >
          <i class="el-icon-folder" />
          <i class="el-icon-rank drag-trigger" />
          {{ node.text }}
        </span>
      </span>
    </Tree>
  </div>
</template>

<script>
//导入draggable组件
// import {Tree, // 基础树
//   Fold, Check, Draggable, // 插件: 折叠, 勾选框, 拖拽
//   foldAll, unfoldAll, cloneTreeData, walkTreeData, getPureTreeData, //方法
// } from 'he-tree-vue'
import { Tree, Draggable, Fold, Check } from "he-tree-vue";
import "he-tree-vue/dist/he-tree-vue.css"; // 基础样式

export default {
  //注册draggable组件
  components: { Tree: Tree.mixPlugins([Draggable, Fold, Check]) },
  data() {
    return {
      chooseFolderId: "",
      choosedClass: "",
      treeData: [
        { text: "node 1", id: 1 },
        {
          text: "node 2",
          id: 2,
          children: [
            {
              id: 3,
              text: "node 2-1",
              children: [{ id: 4, text: "node 3-1" }],
            },
          ],
        },
      ],
    };
  },
  methods: {
    chooseCaseFolder(node, path) {

      this.chooseFolderId = node.id;

      console.log('----',this.chooseFolderId)

    },
  },
};
</script>

<style scoped>

.main-content {
  margin-left: 170px;
  width: 200px;
  border: 1px solid #000;
}

.main-content >>> .tree-node {
  border: none;
  margin-bottom: 0px;
}

.el-icon-rank {
  display: none;
}

.note-content:hover {
  background-color: #eee;
  cursor: pointer;
}

.note-content:hover .drag-trigger {
  display: inline-block;
}

.note-content:hover .el-icon-folder {
  display: none;
}

.choosed_note {
  background-color: #3089dc;
}

.choosed_note:hover {
  background-color: #3089dc;
}
</style>