vue中ztree的使用方法

来源：互联网 2024-10-13 08:17:48

本文主要和大家介绍vue中如何使用ztree,包括配置package.json，自动加载jquery的方法，本文给大家介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下，希望能帮助到大家。

配置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:&#39;jquery&#39;,   $:&#39;jquery&#39;,  }) ]

import jquery以及ztree

import &#39;jquery&#39; import &#39;ztree&#39; import &#39;ztree/css/metroStyle/metroStyle.css&#39;

调用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);  } }