史上最全，在vue中使用ztree实现树形结构（第三篇）

在Vue中使用zTree实现树形结构的第三篇示例代码如下：

<template>
  <div>
    <div id="treeDemo" class="ztree"></div>
  </div>
</template>
 
<script>
import '../../../node_modules/ztree_v3/css/zTreeStyle/zTreeStyle.css'
import $ from 'jquery'
import '../../../node_modules/ztree_v3/js/jquery.ztree.core-3.5.min.js'
import '../../../node_modules/ztree_v3/js/jquery.ztree.excheck-3.5.min.js'
 
export default {
  name: 'TreeDemo',
  data() {
    return {
      zTreeObj: null
    }
  },
  mounted() {
    this.initTree();
  },
  methods: {
    initTree() {
      const setting = {
        check: {
          enable: true
        },
        data: {
          simpleData: {
            enable: true
          }
        }
      };
 
      const zNodes = [
        { id: 1, pId: 0, name: "父节点 1", open: true },
        { id: 11, pId: 1, name: "子节点 1-1" },
        { id: 12, pId: 1, name: "子节点 1-2" },
        { id: 2, pId: 0, name: "父节点 2", open: true }
        // 更多节点...
      ];
 
      this.zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    }
  }
}
</script>
 
<style scoped>
.ztree {
  margin-top: 10px;
  border: 1px solid #6177c4;
  background: #f0f6ff;
  width: 300px;
  height: 300px;
  overflow-y: auto;
  overflow-x: auto;
}
</style>

这段代码展示了如何在Vue组件中初始化和配置zTree，并加载简单的树形数据。它使用jQuery来操作zTree插件，并通过$.fn.zTree.init方法初始化树。在mounted钩子中调用initTree方法来确保在DOM元素加载后再进行初始化。通过CSS样式，我们为树设置了边框、背景色和尺寸。