1,本次是在vue-cli项目中使用zTree
2,因为zTree是一个jquery的树插件,所以首先需要安装jquery依赖,npm install jquery
3,然后在官网下载zTree的zip包,放置在vue-cli的puglins目录下
4,然后在vue-cli项目中需要使用ztree的文件比如tree.vue中引入jquery以及ztree:
import $ from 'jquery'
window.jQuery = $;
require( '../../plugins/zTree/js/jquery.ztree.all.js');
5,接着在中创建一个容器:
6,在
data(){
return {setting: { }
zNodes: [
{id: 1, pId: 0, name: "父节点 1", open: true},
{id: 11, pId: 1, name: "叶子节点 1-1"},
{id: 12, pId: 1, name: "叶子节点 1-2"},
{id: 2, pId: 0, name: "父节点 2"},
{id: 21, pId: 2, name: "叶子节点 2-1"},
]
}
}
7, 在
data(){
return {
setting: {
view: {
selectedMulti: true,
showLine:false
}
}}