So verwenden Sie Ztree in Vue

Dieser Artikel stellt Ihnen hauptsächlich die Verwendung von ztree in Vue vor, einschließlich der Konfiguration von package.json und dem automatischen Laden von jquery. Freunde, die es benötigen, können darauf verweisen kann jedem helfen.

Paket.json konfigurieren

JQuery und Ztree packen und herunterladen

 "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"
 },

Automatisch jquery wird geladen

jquery wird automatisch geladen, wenn das Projekt erstellt wird, und die Ausgabe an jQuery wird in ztree verwendet.

plugins: [
  new webpack.ProvidePlugin({
   jQuery:'jquery',
   $:'jquery',
  })
 ]

jquery und ztree importieren

import 'jquery'
 import 'ztree'
 import 'ztree/css/metroStyle/metroStyle.css'

Ztree aufrufen, um eine Baumstruktur zu generieren

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

Verwandte Empfehlungen:

jQuery verwendet das zTree-Plug-in, um die gemeinsame Nutzung von ziehbarem Baumcode zu implementieren

Das jQuery-Plug-in zTree realisiert die gemeinsame Nutzung von Beispielen für den Erhalt von Knotendaten der ersten Ebene

Fünf einfache Schritte zur Realisierung der gemeinsamen Nutzung von Anwendungsbeispielen von zTree

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Ztree in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!