vue中使用eTree

1.在vue中引入zTree，需要用到如下核心文件
jquery.ztree.core.min.js
jquery.ztree.excheck.min.js
zTreeStyle 文件夹中的样式，这些可以去官网下载，然后放入我们项目的静态文件中引用

官网地址：http://www.treejs.cn

2.接下来我们就能实现一个简单的demo了，代码如下：

<template>
    <div class="zTreeWrapper">
        <ul id="treeDemo" class="ztree" @select="zTreeOnClick"></ul>
    </div>
</template>
<script>
      export default {
            name: "zTreeWrapperNameSpace",
            data() {
                  return {
                        queryContent:'',
                        setting: {
                              treeId: "key",
                              data: {
                                    key: {
                                          name: "title"
                                    }
                              },
                              callback: {
                                    onClick: this.zTreeOnClick //树的点击事件
                              }
                        },
                        nodeList: [
                              {
                                    key: "1",
                                    title: "测试1级",
                                    children: [
                                          {
                                                key: "2",
                                                title: "测试1-1"
                                          },
                                          {
                                                key: "3",
                                                title: "测试1-2"
                                          }
                                    ]
                              }
                        ]
                  };
            },
            mounted() {
                  $.fn.zTree.init($("#treeDemo"), this.setting, this.nodeList).expandAll(true);
            },
            methods: {
                  zTreeOnClick(event, treeId, treeNode) {
                        console.log("treeClick", event, treeId, treeNode);
                  },
            }
      }
</script>

<style scoped lang="scss">
    .zTreeWrapper {
        width: 300px;
        height: 100%;
    }
</style>

demo效果实现后我们就可以跟着官网的API配置文件慢慢实现我们的功能了，加油！

交流

1、QQ群：可添加qq群共同进阶学习： 进军全栈工程师疑难解 群号: 856402057

2、公众号：公众号「进军全栈攻城狮」
​​
​​​​​​​​​​​​