Heim > Artikel > Web-Frontend > 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!