Rumah > hujung hadapan web > tutorial js > vue中ztree的使用方法

vue中ztree的使用方法

小云云
Lepaskan: 2018-02-07 09:33:12
asal
3085 orang telah melayarinya

本文主要和大家介绍vue中如何使用ztree,包括配置package.json,自动加载jquery的方法,本文给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家。

配置package.json

打包下载jquery以及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"
 },
Salin selepas log masuk

自动加载jquery

项目build的时候自动加载jquery,并且输出到jQuery中,在ztree中会使用到jQuery。


plugins: [
  new webpack.ProvidePlugin({
   jQuery:'jquery',
   $:'jquery',
  })
 ]
Salin selepas log masuk

import jquery以及ztree


import 'jquery'
 import 'ztree'
 import 'ztree/css/metroStyle/metroStyle.css'
Salin selepas log masuk

调用ztree生成树形结构


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);
  }
 }
Salin selepas log masuk

相关推荐:

jQuery使用zTree插件实现可拖拽的树代码分享

jQuery插件zTree实现获取一级节点数据实例分享

五步轻松实现zTree的使用实例分享

Atas ialah kandungan terperinci vue中ztree的使用方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan