vue封装ztree组件

vue中使用ztree

使用步骤如下

  1. npm install @ztree/ztree_v3
  2. 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++;
    },

齐活~~

你可能感兴趣的:(vue.jsztree)