求一个在vue中引入ztree的树形code
0
悬赏园豆：20
[已解决问题]
解决于 2019-11-04 16:50
求一个在vue中引入ztree的树形code
最佳答案
1
<template>
<div class="ztree">
<div class="" ref="treedemo"></div>
</div>
</template>
<script>
// npm i ztree --save
import ztree from "ztree"
import "ztree/css/zTreeStyle/zTreeStyle.css";
var setting = {
view: {
showLine: false
},
data: {
simpleData: {
enable: true
}
}
};
var znodes =[
{ id:1, pId:0, name:"父节点1 - 展开", open:true},
{ id:11, pId:1, name:"父节点11 - 折叠"},
{ id:111, pId:11, name:"叶子节点111"},
{ id:112, pId:11, name:"叶子节点112"},
{ id:113, pId:11, name:"叶子节点113"},
{ id:114, pId:11, name:"叶子节点114"},
{ id:12, pId:1, name:"父节点12 - 折叠"},
{ id:121, pId:12, name:"叶子节点121"},
{ id:122, pId:12, name:"叶子节点122"},
{ id:123, pId:12, name:"叶子节点123"},
{ id:124, pId:12, name:"叶子节点124"},
{ id:13, pId:1, name:"父节点13 - 没有子节点", isparent:true},
{ id:2, pId:0, name:"父节点2 - 折叠"},
{ id:21, pId:2, name:"父节点21 - 展开", open:true},
{ id:211, pId:21, name:"叶子节点211"},
{ id:212, pId:21, name:"叶子节点212"},
{ id:213, pId:21, name:"叶子节点213"},
{ id:214, pId:21, name:"叶子节点214"},
{ id:22, pId:2, name:"父节点22 - 折叠"},
{ id:221, pId:22, name:"叶子节点221"},
{ id:222, pId:22, name:"叶子节点222"},
{ id:223, pId:22, name:"叶子节点223"},
{ id:224, pId:22, name:"叶子节点224"},
{ id:23, pId:2, name:"父节点23 - 折叠"},
{ id:231, pId:23, name:"叶子节点231"},
{ id:232, pId:23, name:"叶子节点232"},
{ id:233, pId:23, name:"叶子节点233"},
{ id:234, pId:23, name:"叶子节点234"},
{ id:3, pId:0, name:"父节点3 - 没有子节点", isparent:true}];
export default {
name:"ztree",
mounted(){
$.fn.zTree.init($(this.$refs.treedemo), setting, znodes);
}
}
</script>
收获园豆：20
我找出来例子，但是我不知道怎么把ztree放在vue中用，求指点
@走过不远的地方: 我上面的代码就是的呀。。。完整的使用了。效果也出来了
@muamaker: 哥，我整体复制下来，然后运行，对吗?
@muamaker: 这个卡我几天了，大佬帮帮忙啊
@走过不远的地方: 你是不是没用过 vue 呀，如果是引入的 vue.js 文件，那这个得改一下。 如果用的 webpack 的环境，直接新建一个 .vue 文件，代码复制进去就可以了。
如果还不懂，，建议你话几分钟去官网学习一下 vue 基本使用。
@muamaker: 我只用了vue.js
@走过不远的地方: 好吧。。这个那要改一下，我要下班了，，明天吧
@muamaker: 谢谢哥，麻烦了
@走过不远的地方:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
li{
list-style: none;
}
</style>
<link rel="stylesheet" href="./zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="./zTree_v3/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="./zTree_v3/js/jquery.ztree.all.min.js"></script>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div ref="treedemo" class="ztree">
</div>
</div>
</body>
<script>
var setting = {
view: {
showLine: false
},
data: {
simpleData: {
enable: true
}
}
};
var znodes =[
{ id:1, pId:0, name:"父节点1 - 展开", open:true},
{ id:11, pId:1, name:"父节点11 - 折叠"},
{ id:111, pId:11, name:"叶子节点111"},
{ id:112, pId:11, name:"叶子节点112"},
{ id:113, pId:11, name:"叶子节点113"},
{ id:114, pId:11, name:"叶子节点114"},
{ id:12, pId:1, name:"父节点12 - 折叠"},
{ id:121, pId:12, name:"叶子节点121"},
{ id:122, pId:12, name:"叶子节点122"},
{ id:123, pId:12, name:"叶子节点123"},
{ id:124, pId:12, name:"叶子节点124"},
{ id:13, pId:1, name:"父节点13 - 没有子节点", isparent:true},
{ id:2, pId:0, name:"父节点2 - 折叠"},
{ id:21, pId:2, name:"父节点21 - 展开", open:true},
{ id:211, pId:21, name:"叶子节点211"},
{ id:212, pId:21, name:"叶子节点212"},
{ id:213, pId:21, name:"叶子节点213"},
{ id:214, pId:21, name:"叶子节点214"},
{ id:22, pId:2, name:"父节点22 - 折叠"},
{ id:221, pId:22, name:"叶子节点221"},
{ id:222, pId:22, name:"叶子节点222"},
{ id:223, pId:22, name:"叶子节点223"},
{ id:224, pId:22, name:"叶子节点224"},
{ id:23, pId:2, name:"父节点23 - 折叠"},
{ id:231, pId:23, name:"叶子节点231"},
{ id:232, pId:23, name:"叶子节点232"},
{ id:233, pId:23, name:"叶子节点233"},
{ id:234, pId:23, name:"叶子节点234"},
{ id:3, pId:0, name:"父节点3 - 没有子节点", isparent:true}];
let vm = new Vue({
el:"#app",
name:"ztree",
mounted(){
$.fn.zTree.init($(this.$refs.treedemo), setting, znodes);
}
});
</script>
</html>
其他回答(1)
