vue引入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>
    <div id="areaTree">
        <div class="box-title">
            <a href="#">列表<i class="fa  fa-refresh" @click="freshArea"></i></a>
        </div>
        <div class="tree-box">
            <div class="zTreeDemoBackground left">
                <ul id="treeDemo" class="ztree"></ul>
            </div>
        </div>
    </div>
</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>

此處在style中 @Import的就是前面提到的css

我使用的是官網演示中的“最簡單的樹 -- 簡單JSON數據”，使用標準JSON的還要更簡單一些

先讓大家先看到效果，增強自信心，我們再來講解具體的使用。

使用的話，既然已經封裝成組件了，那麼我們可以直接在頁面上通過<ztree></ztree>的方式來使用就行了，效果如下：

效果已經有了，接下來我們結合官方文檔來講解一下：

首先是template，如圖所示

語塞……因爲有點不知道怎麼講起……

第4行是一個表頭，裏面有一個<i>綁定了一個freshArea方法，這個方法主要就是刷新我們的數據，現在暫時沒有用到

第8行纔是重點，輸出了我們的樹

接下來的script纔是重點，所有的樣式等都靠它了

第19行是一個setting對象->裏面再有data->simpleData，是不是看着有點熟悉？

正式官方demo裏面提到的，要看文檔，看文檔，那我們再看看文檔：

你會發現，我這裏TM的不就是照抄的麼？

是的，沒錯，我們這裏的重點就是大家需要知道怎麼抄，按照什麼樣的格式來抄，說真的，一開始我連從哪裏抄都不知道……

至於我們代碼的29行，就是我們的節點數據啦。

所以時間快速地跳躍到了38和42行，這兩行的語句是一模一樣的，如果你看過官方文檔的入門指南，也會發現有同樣的這個語句

所以，到我們這裏，不過就是稍微改動了一下就可以了。

還有最有的style，暫時照抄就行了。

初步接觸，很多東西不懂，基本上就是一知半解地照着寫了下來，希望大家多多指正！

總結：

前面說了一大堆，其實關鍵的幾個地方就是：

1、如何下載、引入zTree到本項目中

2、在vue項目中，組件的模版應該怎麼寫，才能正常顯示我們的tree

3、官方文檔裏面提到的設置，我們如何跟着做

4、vue普通的html有一定的差異，這裏提供了基礎但可用的模板

最後，如果項目不能正常顯示，檢查一下是否jQuery沒有安裝，百度一下jQuery的安裝

請各位大神多多指正！