脚本宝典收集整理的这篇文章主要介绍了VUE中使用 zTree -- jQuery 树插件 及 使用时报错 jQuery is not defined 的问题解决,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
使用需求
时隔两年多,再次使用到了 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” 解决方法
以上是脚本宝典为你收集整理的VUE中使用 zTree -- jQuery 树插件 及 使用时报错 jQuery is not defined 的问题解决全部内容,希望文章能够帮你解决VUE中使用 zTree -- jQuery 树插件 及 使用时报错 jQuery is not defined 的问题解决所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。