chenhaodong / mew-iview

Blame view

examples/routers/tree.vue 9.92 KB
Edit Raw Normal View History
b64204fd   梁灏   update Tree demo 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
  <!--<template>-->
      <!--<div>-->
          <!--<Tree :data="baseData" :load-data="loadData" multiple :render="renderFunc"></Tree>-->
          <!--<Button @click="handleAdd">add</Button>-->
          <!--<Button @click="handleUpdate">update</Button>-->
      <!--</div>-->
  <!--</template>-->
  <!--<script>-->
      <!--export default {-->
          <!--data () {-->
              <!--return {-->
                  <!--baseData: [-->
                      <!--{-->
                          <!--expand: true,-->
                          <!--title: 'parent 1',-->
                          <!--children: [-->
                              <!--{-->
                                  <!--title: 'parent 1-0',-->
                                  <!--expand: false,-->
                                  <!--children: [],-->
                                  <!--loading: false-->
                              <!--},-->
                              <!--{-->
                                  <!--title: 'parent 1-1',-->
                                  <!--expand: true,-->
                                  <!--checked: true,-->
                                  <!--children: [-->
                                      <!--{-->
                                          <!--title: 'leaf',-->
                                          <!--render: (h, { node }) => {-->
                                              <!--return h('Button', {-->
                                                  <!--props: {-->
                                                      <!--type: 'primary',-->
                                                      <!--size: 'small'-->
                                                  <!--},-->
                                                  <!--on: {-->
                                                      <!--click: ({target}) => {-->
                                                          <!--this.logger(target.textContent);-->
                                                      <!--}-->
                                                  <!--}-->
                                              <!--}, node.title + '000');-->
                                          <!--}-->
                                      <!--}-->
                                  <!--]-->
                              <!--}-->
                          <!--]-->
                      <!--}-->
                  <!--]-->
              <!--};-->
          <!--},-->
          <!--methods: {-->
              <!--handleAdd () {-->
                  <!--this.baseData.push(-->
                      <!--{-->
                          <!--title: 'test name',-->
                          <!--checked: true-->
                      <!--}-->
                  <!--);-->
              <!--},-->
              <!--handleUpdate () {-->
                  <!--const child = this.baseData[0].children[0].children[1];-->
                <!--//  console.log(JSON.stringify(this.baseData), '\n', JSON.stringify(child));-->
                  <!--if (!child) return this.$Message.error('Node is async and is not loaded yet');-->
                  <!--else this.$set(child, 'checked', true);-->
              <!--},-->
              <!--logger (txt) {-->
                  <!--console.log(txt);-->
              <!--},-->
              <!--loadData (item, callback) {-->
                  <!--setTimeout(() => {-->
                      <!--callback([-->
                          <!--{-->
                              <!--title: 'children-1',-->
  <!--//                            loading: false,-->
                              <!--children: []-->
                          <!--},-->
                          <!--{-->
                              <!--title: 'children-2',-->
  <!--//                            loading: false,-->
                              <!--children: []-->
                          <!--}-->
                      <!--]);-->
                  <!--}, 2000);-->
              <!--},-->
              <!--renderFunc (h, { node }) {-->
                  <!--return h('Button', {-->
                      <!--props: {-->
                          <!--type: 'ghost'-->
                      <!--}-->
                  <!--}, node.title)-->
              <!--}-->
          <!--}-->
      <!--};-->
  <!--</script>-->
af7d72b4   梁灏   update Tree selected 
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
 
  <!--<template>-->
      <!--<div style="width: 400px;">-->
          <!--<Tree :data="data4" :render="renderContent"></Tree>-->
      <!--</div>-->
  <!--</template>-->
  <!--<script>-->
      <!--export default {-->
          <!--data () {-->
              <!--return {-->
                  <!--data4: [-->
                      <!--{-->
                          <!--title: 'parent 1',-->
                          <!--expand: true,-->
                          <!--children: [-->
                              <!--{-->
                                  <!--title: 'parent 1-1',-->
                                  <!--expand: true,-->
                                  <!--children: [-->
                                      <!--{-->
                                          <!--title: 'leaf 1-1-1',-->
                                          <!--expand: true-->
                                      <!--},-->
                                      <!--{-->
                                          <!--title: 'leaf 1-1-2',-->
                                          <!--expand: true-->
                                      <!--}-->
                                  <!--]-->
                              <!--},-->
                              <!--{-->
                                  <!--title: 'parent 1-2',-->
                                  <!--expand: true,-->
                                  <!--children: [-->
                                      <!--{-->
                                          <!--title: 'leaf 1-2-1',-->
                                          <!--expand: true-->
                                      <!--},-->
                                      <!--{-->
                                          <!--title: 'leaf 1-2-1',-->
                                          <!--expand: true-->
                                      <!--}-->
                                  <!--]-->
                              <!--}-->
                          <!--]-->
                      <!--}-->
                  <!--],-->
                  <!--buttonProps: {-->
                      <!--type: 'ghost',-->
                      <!--size: 'small',-->
                  <!--}-->
              <!--}-->
          <!--},-->
          <!--methods: {-->
              <!--renderContent (h, { data, node, root }) {-->
                  <!--return h('span', {-->
                      <!--style: {-->
                          <!--display: 'inline-block',-->
                          <!--width: '100%'-->
                      <!--}-->
                  <!--}, [-->
                      <!--h('span', data.title),-->
                      <!--h('span', {-->
                          <!--style: {-->
                              <!--display: 'inline-block',-->
                              <!--float: 'right',-->
                              <!--marginRight: '32px'-->
                          <!--}-->
                      <!--}, [-->
                          <!--h('Button', {-->
                              <!--props: Object.assign({}, this.buttonProps, {-->
                                  <!--icon: 'ios-plus-empty'-->
                              <!--}),-->
                              <!--style: {-->
                                  <!--marginRight: '8px'-->
                              <!--},-->
                              <!--on: {-->
                                  <!--click: () => { this.append(data) }-->
                              <!--}-->
                          <!--}),-->
                          <!--h('Button', {-->
                              <!--props: Object.assign({}, this.buttonProps, {-->
                                  <!--icon: 'ios-minus-empty'-->
                              <!--}),-->
                              <!--on: {-->
                                  <!--click: () => { this.remove(node, data, root) }-->
                              <!--}-->
                          <!--})-->
                      <!--])-->
                  <!--]);-->
              <!--},-->
              <!--append (data) {-->
                  <!--this.$set(data, 'children', [{-->
                      <!--title: 'appended node',-->
                      <!--expand: true-->
                  <!--}]);-->
              <!--},-->
              <!--remove (node, data, root) {-->
                  <!--const parentKey = root.find(el => el === node).parent;-->
                  <!--const parent = root.find(el => el.nodeKey === parentKey).node;-->
                  <!--const index = parent.children.indexOf(data);-->
                  <!--parent.children.splice(index, 1);-->
              <!--}-->
          <!--}-->
      <!--}-->
  <!--</script>-->
89f2ba8b   梁灏   init Tree component 
202
 
  <template>
af7d72b4   梁灏   update Tree selected 
203
204
205
 
      <div>
          {{ data1 }}
          <Tree :data="data1"></Tree>
174836c4   梁灏   update Tree Rende... 
206
 
      </div>
89f2ba8b   梁灏   init Tree component 
207
208
209
 
  </template>
  <script>
      export default {
e6c0b158   梁灏   update 
210
 
          data () {
e81207a2   梁灏   update Tree 
211
 
              return {
af7d72b4   梁灏   update Tree selected 
212
 
                  data1: [
75c32d5f   梁灏   rebuild Tree 
213
 
                      {
174836c4   梁灏   update Tree Rende... 
214
 
                          title: 'parent 1',
b64204fd   梁灏   update Tree demo 
215
 
                          expand: true,
69a10b78   梁灏   fixed #787 
216
217
 
                          children: [
                              {
b64204fd   梁灏   update Tree demo 
218
219
220
221
 
                                  title: 'parent 1-1',
                                  expand: true,
                                  children: [
                                      {
af7d72b4   梁灏   update Tree selected 
222
 
                                          title: 'leaf 1-1-1'
b64204fd   梁灏   update Tree demo 
223
224
 
                                      },
                                      {
af7d72b4   梁灏   update Tree selected 
225
 
                                          title: 'leaf 1-1-2'
b64204fd   梁灏   update Tree demo 
226
227
 
                                      }
                                  ]
69a10b78   梁灏   fixed #787 
228
229
 
                              },
                              {
b64204fd   梁灏   update Tree demo 
230
 
                                  title: 'parent 1-2',
9b24f1ab   梁灏   Tree add Render f... 
231
 
                                  expand: true,
6ed0cd73   梁灏   update Tree demo 
232
233
 
                                  children: [
                                      {
af7d72b4   梁灏   update Tree selected 
234
 
                                          title: 'leaf 1-2-1'
b64204fd   梁灏   update Tree demo 
235
236
 
                                      },
                                      {
af7d72b4   梁灏   update Tree selected 
237
 
                                          title: 'leaf 1-2-1'
6ed0cd73   梁灏   update Tree demo 
238
239
 
                                      }
                                  ]
69a10b78   梁灏   fixed #787 
240
241
 
                              }
                          ]
c8157442   梁灏   fixed #499 
242
 
                      }
af7d72b4   梁灏   update Tree selected 
243
 
                  ]
6ed0cd73   梁灏   update Tree demo 
244
 
              }
e81207a2   梁灏   update Tree 
245
 
          }
b64204fd   梁灏   update Tree demo 
246
 
      }
af7d72b4   梁灏   update Tree selected 
247
 
  </script>