Maison > interface Web > js tutoriel > Comment utiliser ztree dans vue (tutoriel détaillé)

Comment utiliser ztree dans vue (tutoriel détaillé)

亚连
Libérer: 2018-06-07 14:25:56
original
6094 Les gens l'ont consulté

Cet article explique principalement comment utiliser ztree dans Vue, y compris la configuration de package.json et le chargement automatique de jquery. Cet article vous le présente en détail et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer

<.>Ce qui suit vous présentera comment utiliser vue ztree ensemble, jetons un coup d'œil !

Configurer package.json

Emballer et télécharger jquery et 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"
 },
Copier après la connexion

Charger automatiquement jquery

Jquery est automatiquement chargé lorsque le projet est construit et la sortie vers jQuery sera utilisée dans ztree.

plugins: [
  new webpack.ProvidePlugin({
   jQuery:&#39;jquery&#39;,
   $:&#39;jquery&#39;,
  })
 ]
Copier après la connexion
importer jquery et ztree

import &#39;jquery&#39;
 import &#39;ztree&#39;
 import &#39;ztree/css/metroStyle/metroStyle.css&#39;
Copier après la connexion
Appeler ztree pour générer une structure arborescente

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);
  }
 }
Copier après la connexion
Ce qui précède est ce que j'ai compilé pour tout le monde, je l'espère sera utile à tout le monde à l’avenir. Utile.

Articles connexes :

Comment obtenir des éléments de nœud à l'aide de JS

À propos de l'utilisation de vue-fontawesome dans vue.js

Utilisez JS pour ajouter de nouveaux éléments

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
vue
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal