共计 2232 个字符，预计需要花费 6 分钟才能阅读完成。
使用需求
时隔两年多，再次使用到了 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.js
import $ from ‘jquery’
window.$ = $
window.jQuery = $
export default $
以后引用 jquery 时指向 jquery-vendor.js
import $ 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”解决方法
