在vue中使用vue-ztree-2.0

搭建vue项目

安装vue-ztree-2.0

npm i vue-ztree-2.0 

在main.js中注册

这里还遇到了一个小坑，关于编译的问题，写成下面的代码就可以正常运行了

import Vue from 'vue'
import App from './App'
import router from './router'
import vueztree from 'vue-ztree-2.0/dist/vue-ztree-2.0.umd.min.js'
import 'vue-ztree-2.0/dist/vue-ztree-2.0.css'

Vue.config.productionTip = false

Vue.use(vueztree);
new Vue({
  el: '#app',
  router,
  components: {
    App
  },
  template: '<App/>'
})

在.vue页面文件中编写模板

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <div class="list" style="width:280px;">
      <vue-ztree
        :list.sync="ztreeDataSource"
        :func="nodeClick"
        :expand="expandClick"
        :contextmenu="contextmenuClick"
        :is-open="false"
        :is-check="true"
      ></vue-ztree>
    </div>
  </div>
</template>

list是数据列表，其它参考这里
:is-check=“true” 可以开启选框，这个是在源码发现的，在示例里没有说明。也就是说还有其它的属性但是介绍里没有说明。