關於在Vue中使用ZTree

時間 2021-01-30

標籤 php css vue node jquery ios git github npm json 欄目 PHP 简体版

原文原文鏈接

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

有前輩使用了vue-giant-tree組件對Ztree進行了vue的封裝，可是由於沒有所有將ztree的接口暴露出，無奈仍是得使用原生ZTree，原本我是用npm去裝ztree的後來發現，不少東西直接上手改源碼會更快，尤爲是當我想借用ztree的fuzzySearch的時候，因而我用了個笨方法，我把ztree看成靜態JS拿進來直接用了，固然，這種作法未必可取。css

先來看一下個人結構樹vue

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

代碼以下jquery

<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>