Skip to content

Commit 5ef9ad1

Browse files
lisiyizulisiyizu
committed
修复console中报错的问题
1 parent 1dc36c1 commit 5ef9ad1

File tree

3 files changed

+142
-75
lines changed

3 files changed

+142
-75
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"author": "lisiyizu <512235550@qq.com>",
55
"private": true,
66
"scripts": {
7-
"dev": "webpack-dev-server --inline --hot --host 127.0.0.1 --port 8081",
7+
"dev": "webpack-dev-server --inline --hot --host 127.0.0.1 --port 8087",
88
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
99
},
1010
"dependencies": {

‎src/App.vue

+103-38
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,129 @@
11
<template>
22
<div id="app">
33
<h1>{{ msg }}</h1>
4-
<div style='width:280px;'>
4+
<div style='width:280px;' v-if='ztreeDataSource.length>0'>
55
<vue-ztree :list.sync='ztreeDataSource' :func.sync='nodeClick' :is-open='true'></vue-ztree>
66
</div>
77
</div>
88
</template>
99

1010
<script>
11+
import Vue from 'vue'
1112
import vueZtree from './component/vue-ztree.vue'
1213
export default {
1314
data () {
1415
return {
1516
msg: 'Hello Vue-Ztree!',
16-
ztreeDataSource:[{
17-
id:1,
18-
name:"音乐",
19-
children:[]
20-
},{
21-
id:220,
22-
name:"游戏",
23-
children:[],
24-
path:"http://www.baidu.com"
25-
},{
26-
id:2,
27-
name:"视频",
28-
children:[{
29-
id:3,
30-
name:"电影",
31-
children:[{
32-
id:4,
33-
name:"国产电影"
34-
},{
35-
id:5,
36-
name:"好莱坞电影"
37-
},{
38-
id:6,
39-
name:"小语种电影"
40-
}]
41-
},{
42-
id:7,
43-
name:"短片",
44-
children:[{
45-
id:9,
46-
name:"电视剧"
47-
},{
48-
id:10,
49-
name:"短片"
50-
}]
51-
}]
52-
}]
17+
ztreeDataSource:[]
5318
}
5419
},
5520
methods:{
5621
nodeClick:function(m){
5722
console.log(JSON.parse(JSON.stringify(m)));
23+
24+
var node = JSON.parse(JSON.stringify(m));
25+
// 动态加载子节点, 模拟ajax请求数据
26+
// 请注意 id 不能重复哦。
27+
if(node.hasOwnProperty("children")){
28+
node.children.push({
29+
id:+new Date(),
30+
name:"动态加载节点1",
31+
path:"",
32+
clickNode:false,
33+
isFolder:false,
34+
children:[{
35+
id:+new Date()+1,
36+
name:"动态加载末节点",
37+
path:"",
38+
clickNode:false,
39+
isFolder:false,
40+
}]
41+
});
42+
43+
m.children = node.children;
44+
}
5845
}
5946
},
6047
components:{
6148
vueZtree
49+
},
50+
ready(){
51+
// 异步获取数据操作
52+
setTimeout(()=>{
53+
this.ztreeDataSource = [{
54+
id:220,
55+
name:"游戏1",
56+
children:[{
57+
id:221,
58+
name:"游戏2",
59+
path:"",
60+
children:[{
61+
id:222,
62+
name:"游戏3",
63+
path:"",
64+
children:[{
65+
id:223,
66+
name:"游戏4",
67+
path:"",
68+
children:[{
69+
id:224,
70+
name:"游戏5",
71+
path:"",
72+
children:[{
73+
id:225,
74+
name:"游戏6",
75+
path:"",
76+
children:[{
77+
id:226,
78+
name:"游戏末节点",
79+
path:""
80+
}],
81+
}],
82+
}],
83+
}],
84+
}],
85+
}],
86+
path:"http://www.baidu.com"
87+
},{
88+
id:1,
89+
name:"音乐",
90+
children:[],
91+
path:"http://www.baidu.com"
92+
},{
93+
id:2,
94+
name:"视频",
95+
children:[{
96+
id:3,
97+
name:"电影",
98+
children:[{
99+
id:4,
100+
name:"国产电影",
101+
path:""
102+
},{
103+
id:5,
104+
name:"好莱坞电影",
105+
path:""
106+
},{
107+
id:6,
108+
name:"小语种电影",
109+
path:""
110+
}]
111+
},{
112+
id:7,
113+
name:"短片",
114+
children:[{
115+
id:9,
116+
name:"电视剧",
117+
path:""
118+
},{
119+
id:10,
120+
name:"短片",
121+
path:""
122+
}]
123+
}],
124+
path:""
125+
}]
126+
},1000);
62127
}
63128
}
64129
</script>

‎src/component/vue-ztree.vue

+38-36
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
2525
ul.ztree {border:1px solid #ddd;background: #ffffff;width:100%;height:auto;overflow-y:scroll;overflow-x:auto;}
2626
27-
.ztree * {padding:0; margin:0; font-size:14px; font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif}
27+
.ztree * {padding:0; margin:0; font-size:15px; font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif}
2828
.ztree {margin:0; padding:5px; color:#333 ;}
2929
.ztree li{position: relative; padding:0; margin:0; list-style:none; line-height:24px; text-align:left; white-space:nowrap; outline:0}
3030
.ztree li ul{ margin:0; padding:0 0 0 18px}
@@ -110,16 +110,22 @@
110110
<template>
111111
<!--（ztree－🌲）-->
112112
<div class="ztree_content_wrap">
113-
<div class="zTreeDemoBackground left" v-if='list'>
113+
<div class="zTreeDemoBackground left">
114114
<ul class="ztree">
115-
<ztree-item v-for='(i,m) in list' :model.sync="m" :num.sync='i' root='0' :nodes.sync='list.length' :callback='func' :trees.sync='list'></ztree-item>
115+
<ztree-item v-for='(i,m) in treeDataSource' :model.sync="m" :num.sync='i' root='0' :nodes.sync='treeDataSource.length' :callback='func' :trees.sync='treeDataSource'></ztree-item>
116116
</ul>
117117
</div>
118118
</div>
119119
</template>
120120

121121
<script>
122+
import Vue from 'vue'
122123
export default{
124+
data () {
125+
return {
126+
treeDataSource:[]
127+
}
128+
},
123129
props:{
124130
// 树数据
125131
list:{
@@ -128,24 +134,14 @@ export default{
128134
},
129135
// 点击回调
130136
func:{
131-
type:Function,
132-
twoWay:true
137+
type:Function
133138
},
134139
// 是否展开
135140
isOpen:{
136141
type:Boolean,
137-
twoWay:true,
138142
default:false
139143
}
140144
},
141-
watch:{
142-
'list':{
143-
handler:function(){
144-
this.initTreeData();
145-
},
146-
deep:true
147-
}
148-
},
149145
methods:{
150146
initTreeData(){
151147
var vm = this;
@@ -170,7 +166,7 @@ export default{
170166
171167
recurrenceFunc(tempList);
172168
173-
this.list = tempList;
169+
this.treeDataSource = tempList;
174170
}
175171
},
176172
components:{
@@ -201,17 +197,12 @@ export default{
201197
twoWay:true
202198
},
203199
callback:{
204-
type:Function,
205-
twoWay:true
200+
type:Function
206201
}
207202
},
208203
methods:{
209204
Func(m){
210-
if(m.path){
211-
window.location.href = m.path;
212-
}else{
213-
this.callback.call(null,m);
214-
}
205+
this.callback.call(null,m);
215206
216207
// 查找点击的子节点
217208
var recurFunc = function(data){
@@ -258,36 +249,47 @@ export default{
258249
},
259250
// 是否有儿子节点
260251
isChildren:function(){
261-
return this.model.children.length>0 && this.num+1 != this.nodes;
252+
return this.num+1 != this.nodes;
262253
},
263254
// 展开/收起
264255
prefixClass:function(){
265256
var returnChar = "";
266-
267257
if(this.rootClass.indexOf("docu")==-1){
268258
if(this.model.isFolder){
269-
returnChar = "open";
259+
returnChar = "open";
270260
}else {
271-
returnChar = 'close';
272-
}
261+
returnChar = 'close'
262+
}
273263
}
274-
264+
275265
if(!this.model.children && this.rootClass.indexOf("docu")==-1){
276-
returnChar = 'docu';
266+
returnChar = 'docu'
277267
}
278-
268+
279269
return returnChar;
270+
},
271+
liClassVal:function(){
272+
return "level"+this.num;
273+
},
274+
spanClassVal:function(){
275+
return "button level"+this.num+" switch "+this.rootClass+this.prefixClass;
276+
},
277+
aClassVal:function(){
278+
return this.model.clickNode ? "level"+this.num+' curSelectedNode':"level"+this.num;
279+
},
280+
ulClassVal:function(){
281+
return this.isChildren && this.model.children ?"level"+this.num+' line':"level"+this.num;
280282
}
281283
},
282284
template:
283-
`<li class="level{{num}}">
284-
<span class="button level{{num}} switch {{rootClass}}{{prefixClass}}" @click='open(model)'></span>
285-
<a class="level{{num}} {{model.clickNode?'curSelectedNode':''}}" @click='Func(model)'>
286-
<span><img v-if='model.iconPath' :src='model.iconPath' :style='model.iconStyle'></span>
285+
`<li :class="liClassVal">
286+
<span :class="spanClassVal" @click='open(model)'></span>
287+
<a :class="aClassVal" @click='Func(model)'>
288+
<span v-if='model.iconPath'><img :src='model.iconPath' :style='model.iconStyle'></span>
287289
<span class="node_name">{{model.name}}</span>
288290
</a>
289-
<ul class="level{{num}} {{isChildren?'line':''}}" v-show='model.isFolder'>
290-
<ztree-item v-for="(i,item) in model.children" :callback.sync='callback' :model.sync="item" :num.sync='i' root='1' :nodes.sync='model.children.length' :trees.sync='trees'></ztree-item>
291+
<ul :class="ulClassVal" v-show='model.isFolder'>
292+
<ztree-item v-for="(i,item) in model.children" :callback='callback' :model.sync="item" :num.sync='i' root='1' :nodes.sync='model.children.length' :trees.sync='trees'></ztree-item>
291293
</ul>
292294
</li>`
293295
}

0 commit comments

Comments
 (0)