vue中如何使用ztree
编程学习 2021-07-04 17:33www.dzhlxh.cn编程入门
这篇文章主要介绍了vue中如何使用ztree,包括配置package.json，自动加载jquery的方法，本文给大家介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下
狼蚁网站SEO优化给大家介绍vue ztree 结合使用方法，一起看看吧！
配置package.json
打包下载jquery以及ztree
"dependencies": {
"element-ui": "^2.1.0",
"vue": "^2.5.2",
"axios": "^0.16.1",
"jquery":"3.3.1",
"vue-awesome":"2.3.4",
"ztree":"3.5.24"
},
自动加载jquery
项目build的时候自动加载jquery，并且输出到jQuery中，在ztree中会使用到jQuery。
plugins: [
new webpack.ProvidePlugin({
jQuery:'jquery',
$:'jquery',
})
]
import jquery以及ztree
import 'jquery' import 'ztree' import 'ztree/css/metroStyle/metroStyle.css'
调用ztree生成树形结构
export default {
data() {
return {
nodeData: [{
name: "父节点1", children: [
{name: "子节点1"},
{name: "子节点2"}
]
}],
setting:{
view: {
showLine: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
onClick: this.getFileDesc
}
}
}
},
mounted(){
let nodeData = this.nodeData
$.fn.zTree.init($("#uploadtree"), this.setting, nodeData);
}
}
总结
以上所述是长沙网络推广给大家介绍的vue中如何使用ztree，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！
上一篇：Vue封装Swiper实现图片轮播效果
下一篇：javascript回调函数详解