搭建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” 可以开启选框,这个是在源码发现的,在示例里没有说明。也就是说还有其它的属性但是介绍里没有说明。