Home >Web Front-end >JS Tutorial >How to use ztree in vue

How to use ztree in vue

小云云
小云云Original
2018-02-07 09:33:123059browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn