So verwenden Sie Ztree in Vue (ausführliches Tutorial)

Dieser Artikel stellt hauptsächlich die Verwendung von ztree in Vue vor, einschließlich der Konfiguration von package.json und der Methode zum automatischen Laden von jquery. Dieser Artikel stellt Sie ausführlich vor und hat Referenzwert

Im Folgenden erfahren Sie, wie Sie vue ztree gemeinsam verwenden. Schauen wir uns das an!

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

JQuery automatisch laden

Die Projekt-JQuery wird während der Erstellung automatisch geladen und in jQuery ausgegeben. 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);
  }
 }

Das Obige habe ich für alle zusammengestellt. Ich hoffe, es wird für alle hilfreich sein die Zukunft.

Verwandte Artikel:

So erhalten Sie Knotenelemente mit JS

Über die Verwendung von vue-fontawesome in vue.js

Verwenden Sie JS, um neue Elemente hinzuzufügen

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