vue中如何使用ztree

下面给大家介绍vueztree结合使用方法，一起看看吧！配置package.json打包下载jquery以及ztree"depe

下面给大家介绍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，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！