在大数据量场景下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的查询功能