Maison > interface Web > js tutoriel > Comment utiliser ztree dans vue

Comment utiliser ztree dans vue

小云云
Libérer: 2018-02-07 09:33:12
original
3085 Les gens l'ont consulté

Cet article vous présente principalement comment utiliser ztree dans Vue, y compris la configuration de package.json et le chargement automatique de jquery. Cet article vous présente de manière très détaillée et a une valeur de référence. Les amis qui en ont besoin pourront s'y référer. peut aider.

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

Automatique chargement de 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:'jquery',
   $:'jquery',
  })
 ]
Copier après la connexion

importer jquery et ztree


import 'jquery'
 import 'ztree'
 import 'ztree/css/metroStyle/metroStyle.css'
Copier après la connexion

Appelez ztree pour générer une arborescence


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

Recommandations associées :

jQuery utilise le plug-in zTree pour implémenter le partage de code d'arborescence déplaçable

Le plug-in jQuery zTree réalise le partage d'exemples d'obtention de données de nœuds de premier niveau

Cinq étapes simples pour réaliser le partage d'exemples d'utilisation de zTree

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:
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