ztree在vue-cli中的使用

 

最后效果：一个可拖拽的文件管理树，并有按钮实现增删改、编辑名称。

父子文件状态冻结（文件夹不会因没有子节点而变成子节点）

 

 

在ztree官网下载好文件包，将其中的css和js文件夹放到项目中某个文件夹下（最好新建，我这建了个plugins）,然后项目中引入其中的jquery、css样式、js代码

我总共引用了这三个

  @import '../../plugins/zTree/css/zTreeStyle/zTreeStyle.css';
  import "../plugins/zTree/js/jquery-1.4.4.min"//这句我放在main.js里了
  import '../../plugins/zTree/js/jquery.ztree.all.js'

html部分

<template>
  <div>
      &nbsp;&nbsp;&nbsp;&nbsp;[ <a id="addParent"  href="#" title="增加父节点"  >增加父节点</a> ]
      &nbsp;&nbsp;&nbsp;&nbsp;[ <a id="addLeaf" href="#" title="增加叶子节点" >增加叶子节点</a> ]
      &nbsp;&nbsp;&nbsp;&nbsp;[ <a id="edit" href="#" title="编辑名称" >编辑名称</a> ]<br/>
      &nbsp;&nbsp;&nbsp;&nbsp;[ <a id="remove" href="