vue中使用ztree
使用步骤如下
npm install @ztree/ztree_v3
- ztree依赖jquery,下载jquery
npm install jquery
所以需要在vue.config.js中配置jquery
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
],
3.在main.js中引用
import '@ztree/ztree_v3/js/jquery.ztree.core.min.js'
import '@ztree/ztree_v3/js/jquery.ztree.excheck.min.js'
// import '@ztree/ztree_v3/css/zTreeStyle/zTreeStyle.css'(ztree另一种样式)
import '@ztree/ztree_v3/css/metroStyle/metroStyle.css'
4.封装ztree组件
5.父组件中引用,记得引入与注册
//页面使用
//引入
import Ztree from '@/components/common/ZTree.vue'
//data中使用
componentKey:0,
//强制刷新一下树结构,从新渲染,每次加载数据后需要`this.componentKey++`,不然渲染不出来
//注册组件
components:{
Ztree
},
6.子组件中的方法,父组件随意引用,例子如下
//刷新树结构方法
refreshTreeMethod(){
this.$refs.pageTree.init();//刷新树结构-页面树
this.componentKey++;
},
齐活~~