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",//返回数据的idpIdKey: "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()]}
};