首页 新闻 搜索 专区 学院

求一个在vue中引入ztree的树形code

0
悬赏园豆:20 [已解决问题] 解决于 2019-11-04 16:50

求一个在vue中引入ztree的树形code

走过不远的地方的主页 走过不远的地方 | 初学一级 | 园豆:36
提问于:2019-11-01 13:50
< >
分享
最佳答案
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
muamaker | 小虾三级 |园豆:773 | 2019-11-01 15:32

我找出来例子,但是我不知道怎么把ztree放在vue中用,求指点

走过不远的地方 | 园豆:36 (初学一级) | 2019-11-01 15:34

@走过不远的地方: 我上面的代码就是的呀。。。完整的使用了。效果也出来了

muamaker | 园豆:773 (小虾三级) | 2019-11-01 17:07

@muamaker: 哥,我整体复制下来,然后运行,对吗?

走过不远的地方 | 园豆:36 (初学一级) | 2019-11-01 17:12

@muamaker: 这个卡我几天了,大佬帮帮忙啊

走过不远的地方 | 园豆:36 (初学一级) | 2019-11-01 17:15

@走过不远的地方: 你是不是没用过 vue 呀,如果是引入的 vue.js 文件,那这个得改一下。 如果用的 webpack 的环境,直接新建一个 .vue 文件,代码复制进去就可以了。
如果还不懂,,建议你话几分钟去官网学习一下 vue 基本使用。

muamaker | 园豆:773 (小虾三级) | 2019-11-01 18:32

@muamaker: 我只用了vue.js

走过不远的地方 | 园豆:36 (初学一级) | 2019-11-01 18:33

@走过不远的地方: 好吧。。这个那要改一下,我要下班了,,明天吧

muamaker | 园豆:773 (小虾三级) | 2019-11-01 18:42

@muamaker: 谢谢哥,麻烦了

走过不远的地方 | 园豆:36 (初学一级) | 2019-11-01 18:51

@走过不远的地方:

<!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>

muamaker | 园豆:773 (小虾三级) | 2019-11-02 10:41
其他回答(1)
0
ycyzharry | 园豆:22051 (高人七级) | 2019-11-01 20:11
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册