「ztree」vue引入zTree入门

ztree

在vue中引入ztree，和引入其他组件类似，首先在main.js里将以下3个js引入：

import "./js/jquery-3.3.1.min.js";
import "../plugins/zTree/js/jquery.ztree.core.min.js";
import "../plugins/zTree/js/jquery.ztree.excheck.min.js";

这三个js分别是：

jQuery，建议从官方网站下载，zTree上的版本有点老，听说有些项目已经不支持；

两个zTree核心包，就是官网提供的下载地址中的文件，我们下载下来找到这两个文件，放到我们的项目文件夹中；

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

在我的项目中，我是把zTree中的一些文件，放在了我的项目plugins中：

在本项目示例中，仅用到了

jquery.ztree.core.min.js

jquery.ztree.excheck.min.js

和zTreeStyle文件夹中的样式

引入文件完成后，开始新建我们新建一个zTree.vue文件

里面的关键代码如下：

<template>
    <p id="areaTree">
        <p class="box-title">
            <a href="#">列表<i class="fa  fa-refresh" @click="freshArea"></i></a>
        </p>
        <p class="tree-box">
            <p class="zTreeDemoBackground left">
                <ul id="treeDemo" class="ztree"></ul>
            </p>
        </p>
    </p>
</template>

<script>
    export default {
        name: "zTree",
        data:function(){
            return{
                setting:{
                    data:{
                        simpleData:{
                            enable: true,
                            idKey: "id",
                            pIdKey: "pId",
                            rootPId: 0
                        }
                    }
                },
                zNodes:[
                    {id:1, pId:0, name: "父节点1"},
                    {id:11, pId:1, name: "子节点1"},
                    {id:12, pId:1, name: "子节点2"}
                ]
            }
        },
        methods:{
            freshArea:function(){
                $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
            }
        },
        mounted(){
            $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
        }
    }
</script>

<style>
    @import '../../../plugins/ztree/css/zTreeStyle/zTreeStyle.css';
    #areaTree{
        border:1px solid #e5e5e5;    margin-bottom: 2px;border-radius: 4px;overflow: hidden;
    }
    .box-title{
        border-radius: 3px 3px 0 0;background-color: #f5f5f5;
    }
    .box-title a{
        color: #2fa4e7;
        text-decoration: none;font-size:14px;    display: block;
        padding: 8px 15px;cursor: pointer;
    }
    .box-title .fa{
        float:right;line-height: 20px;
    }
</style>