Comment utiliser ztree dans vue

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

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',
  })
 ]

importer jquery et ztree

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

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

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!