關於在Vue中使用ZTree

在大數據量場景下Vue的數據監聽機制決定了讓渲染性能被降低，基於Vue實現的常規樹組件幾乎無法勝任上萬條數據的高性能渲染，在IE瀏覽器（即便是IE11）中很容易導致頁面卡死在，這個領域ztree是當之無愧最成熟的方案。

有前輩使用了vue-giant-tree組件對Ztree進行了vue的封裝，但是因為沒有全部將ztree的接口暴露出，無奈還是得使用原生ZTree，本來我是用npm去裝ztree的 后來發現，很多東西直接上手改源碼會更快，尤其是當我想借用ztree的fuzzySearch的時候，於是我用了個笨方法，我把ztree當作靜態JS拿進來直接用了，當然，這種做法未必可取。

先來看一下我的結構樹

 

 其中Ztree.vue就是我使用的組件，本來我是想寫出slot形式的，但是考慮到后面的內置方法，我又放棄了，哈哈，先這么記着吧，后面可能就改掉了

代碼如下

 

<template>
  <div class="this-tree">
    <div id="thisTree" class="ztree">
    </div>
  </div>

</template>

<script>
  import './jquery-1.4.4.min'
  import './jquery.ztree.core'
  import './jquery.ztree.exhide'
  import axios from 'axios'
  import fuzzySearch from '@/views/HomePage2D/zTree/fuzzysearch'
  import EventBus from '@/utils/EventBus'

  export default {
    name: 'zTree',
    components: {},
    data() {
      return {
        nodes: null,
        setting: {
          data: {
            simpleData: {
              enable: true
            }
          },
          view: {
            showIcon: true, dblClickExpand: false, showLine: true
          },
          callback: {
            beforeClick: this.ztpreclick,
          }
        },
        ztreeObj: null,
      }
    },
    watch: {},
    computed: {},
    methods: {
      //zTree點擊節點
      ztpreclick(treeId, treeNode, clickFlag) {

        this.ztreeObj.expandNode(treeNode)

        if (this.ztreeObj.getSelectedNodes().length > 0 && (this.ztreeObj.getSelectedNodes()[0].tId === treeNode.tId)) {
          this.ztreeObj.cancelSelectedNode()
          return false
        }
        if (!(treeNode.children!==null)) {
          EventBus.$emit('zoomToMonitorDevice', `${treeNode.id}`)
        }
      },
      constructFuzzySearch(_searchkeywords, isHighLight, isExpand) {
        fuzzySearch.Search(this.ztreeObj, _searchkeywords, isHighLight, isExpand)
      }
    },
    mounted() {
      let T = this
      axios.get('/camera/menu/list').then(res => {
        if (res.data.code !== 200) {
          this.$Message.error(res.data.msg)
        } else {
          T.nodes = res.data.data
          $.fn.zTree.init($('#thisTree'), T.setting, T.nodes)
          T.ztreeObj = $.fn.zTree.getZTreeObj('thisTree')
        }
      })
      // axios.get('/static/config/dataCollections.json').then(({data}) => {
      //   T.nodes = data.nodes
      //   $.fn.zTree.init($('#thisTree'), T.setting, T.nodes)
      //   T.ztreeObj = $.fn.zTree.getZTreeObj('thisTree')
      // })

    },
    beforeDestroy() {
    }
  }
</script>

<style lang="scss" scoped>
  @import url('./css/zTreeStyle/zTreeStyle.css');
  .this-tree {

    /*> > > .ztree li a.curSelectedNode {*/
    /*  background-color: rgba(255, 230, 176, 0);*/
    /*  border: 0px #FFB951 solid;*/
    /*}*/

    /*> > > .ztree li a {*/
    /*  color: #ffffff;*/
    /*}*/

    /*> > > .ztree {*/
    /*  .button {*/
    /*    height: 25px;*/
    /*  }*/

    /*.line:before, .line:after,*/
    /*.bottom_docu:before, .bottom_docu:after,*/
    /*.center_docu:before, .center_docu:after, {*/
    /*  border-color: #0090EC;*/
    /*  border-width: 1px;*/
    /*  border-style: solid*/
    /*}*/


    /*  .root_close:before, .center_close:before, .bottom_close:before, .roots_close:before {*/
    /*    border: 0px solid;*/
    /*    background-image: url("/static/images/+.png");*/
    /*    width: 16px;*/
    /*    height: 16px;*/
    /*    transform: none;*/
    /*  }*/

    /*  .root_open:before, .roots_open:before, .center_open:before, .bottom_open:before {*/
    /*    border: 0px solid;*/
    /*    background-image: url("/static/images/-.png");*/
    /*    width: 16px;*/
    /*    height: 16px;*/
    /*    transform: none;*/
    /*  }*/


    /*  .ico_open, .ico_docu, .ico_close {*/
    /*    background-position: center !important;*/
    /*  }*/
    /*}*/
  }

</style>

 

然后如果你要該式樣，就去

 

 

這里改他的原生的就行了，他的樹結構點擊+-號的變換是通過一整張圖片，調整他的位置實現的

 

 

可以自己去改成想要的

然后css一定要在main.js中就要引入

 

 要不式樣全部就沒了

 

然后是Ztree的查詢功能