vue ztree 结合使用

最新推荐文章于 2024-04-26 15:21:07 发布

weixin_33868027

最新推荐文章于 2024-04-26 15:21:07 发布

阅读量218

点赞数

文章标签： javascript json webpack ViewUI

原文链接：https://my.oschina.net/xForMe/blog/1618929

版权

vue ztree 结合使用

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

自动加载jquery

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

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

import jquery以及ztree

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

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

转载于:https://my.oschina.net/xForMe/blog/1618929