Home >Web Front-end >JS Tutorial >How to use ztree in vue
This article mainly introduces how to use ztree in vue, including configuring package.json and automatically loading jquery. This article introduces you to it in great detail and has reference value. Friends who need it can refer to it. I hope it can help. Everyone.
Configure package.json
Package and download jquery and 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" },
Automatically load jquery
jquery is automatically loaded when the project is built and output to jQuery. jQuery will be used in ztree.
plugins: [ new webpack.ProvidePlugin({ jQuery:'jquery', $:'jquery', }) ]
import jquery and ztree
import 'jquery' import 'ztree' import 'ztree/css/metroStyle/metroStyle.css'
Call ztree to generate a tree structure
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); } }
Related recommendations:
jQuery uses the zTree plug-in to implement draggable tree code sharing
jQuery plug-in zTree Achieve sharing of examples of obtaining first-level node data
Easily realize sharing of zTree usage examples in five steps
The above is the detailed content of How to use ztree in vue. For more information, please follow other related articles on the PHP Chinese website!