vue 实现ztree

实现 Vue 与 ZTree 的集成

在 Vue 项目中集成 ZTree（基于 jQuery 的树形插件），需要借助 jQuery 和 ZTree 的库文件，并通过 Vue 的生命周期方法初始化和管理 ZTree。

安装依赖

确保项目中已安装 jQuery 和 ZTree 的相关文件。可以通过 CDN 或本地引入的方式加载资源：

<!-- 在 public/index.html 中引入 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/zTree.v3/3.5.48/css/zTreeStyle/zTreeStyle.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/zTree.v3/3.5.48/js/jquery.ztree.all.min.js"></script>

创建 Vue 组件

创建一个 Vue 组件来承载 ZTree 的容器，并在 mounted 钩子中初始化 ZTree。

<template>
  <div>
    <ul id="treeDemo" class="ztree"></ul>
  </div>
</template>

<script>
export default {
  name: 'ZTreeDemo',
  data() {
    return {
      zTreeObj: null,
      setting: {
        view: {
          showLine: true
        },
        data: {
          simpleData: {
            enable: true,
            idKey: 'id',
            pIdKey: 'pId',
            rootPId: 0
          }
        }
      },
      zNodes: [
        { id: 1, pId: 0, name: '父节点 1' },
        { id: 2, pId: 1, name: '子节点 1' },
        { id: 3, pId: 1, name: '子节点 2' }
      ]
    };
  },
  mounted() {
    this.initZTree();
  },
  methods: {
    initZTree() {
      this.zTreeObj = $.fn.zTree.init($('#treeDemo'), this.setting, this.zNodes);
    }
  }
};
</script>

<style scoped>
@import "~ztree/css/zTreeStyle/zTreeStyle.css";
</style>

动态更新数据

如果需要动态更新 ZTree 的数据，可以通过 Vue 的响应式数据更新 ZTree。

methods: {
  updateTreeData(newNodes) {
    this.zNodes = newNodes;
    $.fn.zTree.destroy('treeDemo'); // 销毁旧树
    this.initZTree(); // 重新初始化
  }
}

注意事项

• jQuery 冲突：确保 Vue 和 jQuery 能共存，避免全局污染。
• 组件销毁：在 beforeDestroy 钩子中销毁 ZTree 实例，避免内存泄漏。

beforeDestroy() {
  if (this.zTreeObj) {
    this.zTreeObj.destroy();
  }
}

通过以上步骤，可以在 Vue 项目中实现 ZTree 的基本功能。根据需求扩展 setting 配置（如回调函数、异步加载等）即可满足更多场景。