树节点间距太窄了 很紧凑 须要css调整一下 /*树形图间距*/.ztree li span{ font-size: 14px;}.ztree li a { vertical-align: sub;}.ztree li span.button.center_docu { background-position: -56px -10px; height: 30px;}.ztree li span.button.bottom_docu { background-position: -56px -30px; height: 30px;}
传统网站使用jq-ztree比较多，做一些技术总结ztree网站api：http://www.treejs.cn/v3/api.php //引入css，自己的css，ztree的css<link rel="stylesheet" href="../../../css/main.css" type="text/css"><link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">//引入jq, ztree.core.js,<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>//如果勾选，引入ztree.excheck.js<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>//如果编辑树【拖拽，删除，批量加载】，引入ztree.exedit.js。<script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script><script>//编写配置代码</script>//dom文本中引用<div> //id存放树的区域，class需要添加ztree才会有效果 <ul id="treeDemo" class="ztree"> </ul></div>
其实这个问题之前已经遇到过了，但是还是在这里踩坑了。趁此机会整理一下，避免再犯。问题描述预期效果：弹出dialog对话框，对话框的内容是由ztree实现的树菜单。实际效果：弹出dialog对话框，对话框内容空白，树菜单显示失败。<template> <el-dialog title=“树菜单” :visible.sync=“dialogVisible”> <div id=“tree-menu” class=“ztree”></div> </el-dialog></template><script>export default { data() { return { dialogVisible: false } }, mounted() { let setting = {view: {showIcon: false}}; let zNodes = [ {id: “1”, name: “nodes1”}, {id: “2”, name: “nodes2”} ]; $.fn.zTree.init($("#tree-menu"), setting, zNodes); }}</script>问题原因使用elementUI 1.4版本的时候就遇到过这个问题了，当时一直以为是自己编码的错误，花了很多时间排查。后来控制台调试的时候发现，没有打开dialog之前是介个样子的：第一次打开dialog之后：基本就能明白，dialog的内容是懒渲染模式。在el-dialog__body未渲染之前是无法获取到其中的DOM元素进行操作的。在elementui最新版本的文档中也有提示出来了：问题解决根据文档提示“如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行”。但其实在第一次打开dialog的open事件回调执行的时候，仍然无法执行DOM操作，因为这个时候dialog的内容还是未渲染上去。可使用Vue.$nextTick将DOM操作延迟到DOM更新之后执行。因为树菜单的逻辑较为复杂，可复用，所以直接提取成组件。在组件mounted的时候去获取DOM元素来做ztree的初始化操作，可避开dialog懒渲染带来的DOM元素操作问题。
使用需求时隔两年多，再次使用到了 ztree ，这次是在vue中引入使用，并遇到了一些小问题，在这里把经验和解决办法给大家分享下，共勉。ztree： zTree – jQuery 树插件 官网简介 zTree v3.5 Demo 演示有关ztree的使用，之前整理过两篇在jquery中使用的方法，大家参考下：zTree – jQuery 树插件 使用方法与例子zTree – jQuery 树插件 构造treeNode JSON 数据对象zTree v3.5 Demo 演示 OutLook 样式的左侧菜单在vue中使用zTree首先，需要安装插件：npm install ztree然后，使用ztree具体相关的代码如下：<ul id=“ztree” class=“ztree”></ul>提示：zTree 的容器 className 别忘了设置为 “ztree”！！！import ‘jquery’import ‘ztree’import ‘ztree/css/metroStyle/metroStyle.css’data () { return { treeNodes: ‘’, selectNode: ‘’, selectTreeSetting: { view: { showIcon: true, showLine: true, dblClickExpand: false }, async: { enable: true, type: ‘get’, dataType: ‘json’, url: ‘/xxxx/list.json’, autoParam: [‘id=parentId’], dataFilter: this.filter }, data: { simpleData: { enable: true, idKey: ‘id’, pIdKey: ‘parentId’ } }, callback: { onClick: this.zTreeOnClick } } } }, mounted () { this.initStationSelectTree($(’#station’)) }, methods: { initStationSelectTree (anchor) { this.$get(’/xxxxx/list.json’, {}, response => { //此处是使用的封装过的 this.treeNodes = $.fn.zTree.init(anchor, this.selectTreeSetting, response.data) }) }, filter (treeId, parentNode, childNodes) { if (!childNodes) return null for (var i = 0, l = childNodes.length; i < l; i++) { if (childNodes[i].parentId === ‘super’) childNodes[i].open = true } curChildNodes = childNodes return childNodes }, zTreeOnClick: function (event, treeId, treeNode) { // console.log(treeNode);点击树节点获取当前节点 treeNode.name 等，编写需要的逻辑即可 } }效果如图：报错jQuery is not defined的解决注意，在ztree中会使用到jQuery ，可能会报错jQuery is not defined,一开始参考vue ztree 结合使用中的办法：项目build的时候自动加载jquery，并且输出到jQuery中 new webpack.ProvidePlugin({ jQuery:‘jquery’, $:‘jquery’, })在 npm run dev 之前，先build一下，解决了报错 jQuery is not defined 的问题。但是，重点来了，本地没问题，打包发布到正式环境依然报错jQuery is not defined，这就奇怪了，于是搜了很多解决报错jQuery is not defined的文章，各种方法试了很多，依然是报错，最后，其中一篇Webpack引入jquery及其插件的几种方法中的第四种方案，终于能成功解决了，本地运行和发布到正式环境都没再报错了。这里贴一下解决方案：此方法只依赖于自己，完全不需要任何其他插件与加载器，创建jquery的包装对象jquery-vendor.jsimport $ from ‘jquery’window.$ = $window.jQuery = $export default $以后引用jquery时指向jquery-vendor.jsimport $ from ‘../assets/jquery-vendor.js’import ‘jquery-ui’// 此时UI的方法全部可用，如果需要引用bootstrap，可参照此方法为了调用方便，可在webpack配置文件中创建jquery-vendor.js的别名alias: { jquery : ‘src/assets/jquery-vendor.js’ // 将其指向jquery-vendor.js所在位置} ——————— 作者：蚁方阵 来源：CSDN 原文：https://blog.csdn.net/yiifaa/article/details/51916560 版权声明：本文为博主原创文章，转载请附上博文链接！相关参考vue ztree 结合使用Webpack引入jquery及其插件的几种方法“jQuery/$ is not defined” 解决方法 ...