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

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

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

importer jquery et ztree

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

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

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!