VUE项目中使用ZTree(jQuery插件)

npm 导入jQuery

npm i jquery

npm 导入ztree

npm i ztree

使用到ztree的组件(导入jQuery跟ztree)

import jQuery from "jquery";
import "ztree/js/jquery.ztree.core.min.js";
import "ztree/js/jquery.ztree.excheck.min.js";
import "ztree/css/metroStyle/metroStyle.css";

使用ztree (html)

<template>
	  <div class="zTreeDemoBackground left">
	       <ul id="treeDemosOrigin" class="ztree"></ul>
	  </div>
</template>

获取ztree数据,并初始化

data() {
   return {
         treeData: [],
         setting: {
              view: {
	                  showIcon: true,//是否显示 文件图标
	                  fontCss: {},// ztree的字体颜色
                   },
              data: {
                     key: {
                          name: "fname",//生成树的显示名称
                     },
                     simpleData: {
                          enable: true,
                          idKey: "fcode",//返回数据的id
                          pIdKey: "fparent",//返回数据的parentId
                     },
                  },
               callback: {
                    onClick: (event, treeId, treeNode) => {
                       this.clickTree(event, treeId, treeNode);//点击生成树的点击事件
                    },
                },
            },
   }
}
mounted() {
   this.loadEpc();//这里是加载tree数据的请求
},
methods: {
  loadTree() {// 请求接口
      this.$requestCommand.simpleCategorySelect().then((res) => {
         this.treeData = res.data;
      }).then(() => {
         this.treeobj = jQuery.fn.zTree.init(jQuery("#treeDemosOrigin"), this.setting, this.treeData);
         this.treeobj.expandAll(false);
     });
   },
}

vue中使用jQuery需要在vue.config.js文件中配置插件

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const webpack = require('webpack')

module.exports = {
     // 关键是这一段===========>
    chainWebpack: config => {
        config.plugin('provide').use(webpack.ProvidePlugin, [{
          $: 'jquery',
          jquery: 'jquery',
          jQuery: 'jquery',
          'window.jQuery': 'jquery'
        }])
      },
     //========================>
    publicPath:process.env.VUE_APP_ENV === 'test' ? '/dc/':'',
    outputDir: process.env.outputDir,
    devServer: {
        /* 自动打开浏览器 */
        open: true,
        /* 设置为0.0.0.0则所有的地址均能访问 */
        clientLogLevel: 'warning',
        host: '0.0.0.0',
        port: 8080,
        https: false,
        hotOnly: false,
        /* 使用代理 */
        proxy: {
            [process.env.VUE_APP_BASE_API]: {
                target: process.env.VUE_APP_URL_API,
                changeOrigin: true, //开启代理
                ws: false,
                pathRewrite: {
                    [process.env.VUE_APP_BASE_API]: ''
                }
            }
        }
    },
    configureWebpack: {
        plugins: [
            // new BundleAnalyzerPlugin()
        ]
    }
};