ztree结合hmap使用经验分享

项目背景

在建德封控拦截系统（[email protected]）为追求更快的地图初始化体验，在尝试了hmap2.5.0版本以及2.6.3版本后，由于这两个版本在现场电脑的初始化速度不够流畅，最终使用的是hmap2.1.3版本。同时由于布控选设备（树结构）存在子节点较多的情况（1000+），导致[email protected]版本的tree组件在进行加载节点和勾选操作时回显卡顿，结合基线项目类似功能确定使用ztree插件来解决此问题。

使用场景

通过按钮出发弹窗，弹窗中两个tab项：目录选择和地图选择。

结合使用存在的问题

安装ztree插件，并在对应的vue文件中使用。此时如果在public中的index.html文件中通过script标签已经引入了hmap2.3.0.js文件，控制台会报错：

问题原因

引入本地hmap2.3.0.js文件修改了数组原型Flat方法，同时ztree插件中引入的jquery也需要使用原生的Flat方法。由于前者，导致ztree在使用的时候初始化树节点报错，无法创建树节点。

解决方案

1. 在App.vue文件的onMounted钩子函数中对引入hamp2.3.0.js文件后的原型Flat方法进行缓存

2. 在树组件中的mounted钩子函数中重置数组原型Flat方法：

3. 在使用到ztree时，先重置flat方法；使用结束后，在onUnmounted钩子函数进行flat方法重置为缓存中的flat函数。

zTree的使用

官网： https://www.treejs.cn/v3/main.php#_zTreeInfo

样例demo： https://www.treejs.cn/v3/demo.php#_101

api文档： https://www.treejs.cn/v3/api.php

1. 安装 zTree 插件

npm install ztree --save

2. 在组件中引入 zTree：在需要使用 zTree 的组件中，可以通过 import 语句引入 zTree：

import $ from 'jquery';
import 'ztree/css/zTreeStyle/zTreeStyle.css';
import 'ztree/js/jquery.ztree.all.js';

3. 此时如果控制台报错

   

   需要在vue.config.js中添加代码：

   

4. 在组件的 mounted() 钩子函数中初始化 zTree：在组件加载完成后，可以在 mounted() 钩子函数中初始化 zTree：

异步树+后台自动加载代码实现：