File tree Expand file tree Collapse file tree 1 file changed +51
-2
lines changed Expand file tree Collapse file tree 1 file changed +51
-2
lines changed Original file line number Diff line number Diff line change 17
17
<div id =" app" >
18
18
<h1 >{{ msg }}</h1 >
19
19
<div style =' width :280px ;' v-if =' ztreeDataSource.length>0' >
20
- <vue-ztree :list.sync =' ztreeDataSource' :func =' nodeClick' :is-open =' true' ></vue-ztree >
20
+ <vue-ztree :list.sync =' ztreeDataSource' :func =' nodeClick' :expand = ' expandClick ' : is-open =' true' ></vue-ztree >
21
21
</div >
22
22
</div >
23
23
</template >
@@ -65,6 +65,55 @@ export default {
65
65
methods: {
66
66
nodeClick : function (m ){
67
67
console .log (JSON .parse (JSON .stringify (m)));
68
+ },
69
+ // 点击展开收起
70
+ expandClick : function (m ){
71
+ console .log (JSON .parse (JSON .stringify (m)));
72
+ // 点击异步加载
73
+ if (m .isExpand ) {
74
+ // 动态加载子节点, 模拟ajax请求数据
75
+ // 请注意 id 不能重复哦。
76
+ if (m .hasOwnProperty (" children" )){
77
+
78
+ m .loadNode = 1 ; // 正在加载节点
79
+
80
+ setTimeout (()=> {
81
+
82
+ m .loadNode = 2 ; // 节点加载完毕
83
+
84
+ m .isFolder = ! m .isFolder ;
85
+
86
+ var node = JSON .parse (JSON .stringify (m));
87
+
88
+ // 动态加载子节点, 模拟ajax请求数据
89
+ // 请注意 id 不能重复哦。
90
+ if (node .hasOwnProperty (" children" )){
91
+ node .children .push ({
92
+ id: + new Date (),
93
+ name: " 动态加载节点1" ,
94
+ path: " " ,
95
+ clickNode: false ,
96
+ isFolder: false ,
97
+ isExpand: false ,
98
+ loadNode: 0 ,
99
+ children: [{
100
+ id: + new Date ()+ 1 ,
101
+ name: " 动态加载末节点" ,
102
+ path: " " ,
103
+ clickNode: false ,
104
+ isFolder: false ,
105
+ isExpand: false ,
106
+ loadNode: 0
107
+ }]
108
+ });
109
+
110
+ m .children = node .children ;
111
+ }
112
+
113
+ },1000 )
114
+
115
+ }
116
+ }
68
117
}
69
118
},
70
119
components: {
@@ -104,7 +153,7 @@ body {font-family: Helvetica, sans-serif;}
104
153
<td >expand</td>
105
154
<td >Function</td>
106
155
<td >-</td>
107
- <td >点击展开/收起的方法(在异步加载的时候使用 )</td>
156
+ <td >点击展开/收起的方法(一般在异步加载的时候使用, 非异步加载传null )</td>
108
157
</tr>
109
158
<tr>
110
159
<td >is-open</td>
You can’t perform that action at this time.
0 commit comments