如何在vue项目中使用tree组件（Ztree）

如何在vue项目中使用tree组件（Ztree）

先上两张效果图

支持右键事件，拖动节点，以及复制粘贴功能。

1、vue需要引入jquery
2、封装ztree组件

3、初始化tree配置

  setting: {
    edit: {
      enable: true,
      showRemoveBtn: false,
      showRenameBtn: false
    },
    view: {
      dblClickExpand: false,
      showLine: true,
      selectedMulti: false
    },
    data: {
      simpleData: {
        enable: true,
        idKey: "id",
        pIdKey: "pId",
        rootPId: 0
      }
    },
    callback: {
      onClick: this.zTreeOnClick,
      onRightClick: this.treeNodeRClick,
      beforeDrag: this.beforeDrag,
      beforeDrop: this.beforeDrop,
      onDrag: this.onDrag,
      onDrop: this.onDrop
    },
    async: {
      enable: true, // 开启异步加载
      url: "", //对应的后台请求路径
      dataType: "json",
      autoParam: [] // 异步加载时需要自动提交父节点属性的参数
    }
  },

4、初始化tree数据：

$.fn.zTree.init($("#tree"), this.setting, this.zNodes).expandAll(true);

5、关于右键事件请参考博主资源模块