chenhaodong / mew-iview

Blame view

examples/routers/cascader.vue 10.5 KB
Edit Raw Normal View History
933afc7a   梁灏   fixed #950 
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
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
 
  <!--<template>-->
      <!--<Row>-->
          <!--<i-col span="4">-->
              <!--<Button @click="handleLoad">load</Button>-->
              <!--{{ v1 }}-->
          <!--</i-col>-->
          <!--<i-col span="4">-->
              <!--<Cascader :data="data2" filterable v-model="v1" style="width: 200px;"></Cascader>-->
              <!--&lt;!&ndash;<Cascader :data="data2" filterable v-model="v1" :loadData="loadData"></Cascader>&ndash;&gt;-->
          <!--</i-col>-->
      <!--</Row>-->
  <!--</template>-->
  <!--<script>-->
      <!--export default {-->
          <!--data () {-->
              <!--return {-->
                  <!--v1: [],-->
                  <!--data2: [-->
                      <!--{-->
                          <!--value: 'zhejiang',-->
                          <!--label: '浙江',-->
                          <!--children: [],-->
                          <!--loading: false-->
                      <!--},-->
                      <!--{-->
                          <!--value: 'jiangsu',-->
                          <!--label: '江苏',-->
                          <!--children: [{-->
                              <!--value: 'nanjing',-->
                              <!--label: '南京',-->
                              <!--children: [-->
                                  <!--{-->
                                      <!--value: 'zhonghuamen',-->
                                      <!--label: '中华门'-->
                                  <!--},-->
                                  <!--{-->
                                      <!--value: 'v1',-->
                                      <!--label: 'v111'-->
                                  <!--},-->
                                  <!--{-->
                                      <!--value: 'v2',-->
                                      <!--label: 'v2222'-->
                                  <!--},-->
                                  <!--{-->
                                      <!--value: 'v3',-->
                                      <!--label: 'v333'-->
                                  <!--},-->
                                  <!--{-->
                                      <!--value: 'v4',-->
                                      <!--label: 'v4444'-->
                                  <!--},-->
                                  <!--{-->
                                      <!--value: 'v5',-->
                                      <!--label: 'v555'-->
                                  <!--},-->
                                  <!--{-->
                                      <!--value: 'v6',-->
                                      <!--label: 'v666'-->
                                  <!--},-->
                                  <!--{-->
                                      <!--value: 'v7',-->
                                      <!--label: 'v777'-->
                                  <!--}-->
                              <!--]-->
                          <!--}]-->
                      <!--}-->
                  <!--],-->
                  <!--data3: [{-->
                      <!--value: 'beijing',-->
                      <!--label: '北京',-->
                      <!--children: [-->
                          <!--{-->
                              <!--value: 'gugong',-->
                              <!--label: '故宫'-->
                          <!--},-->
                          <!--{-->
                              <!--value: 'tiantan',-->
                              <!--label: '天坛'-->
                          <!--},-->
                          <!--{-->
                              <!--value: 'wangfujing',-->
                              <!--label: '王府井'-->
                          <!--}-->
                      <!--]-->
                  <!--}, {-->
                      <!--value: 'jiangsu',-->
                      <!--label: '江苏',-->
                      <!--children: [-->
                          <!--{-->
                              <!--value: 'nanjing',-->
                              <!--label: '南京',-->
                              <!--children: [-->
                                  <!--{-->
                                      <!--value: 'fuzimiao',-->
                                      <!--label: '夫子庙',-->
                                  <!--}-->
                              <!--]-->
                          <!--},-->
                          <!--{-->
                              <!--value: 'suzhou',-->
                              <!--label: '苏州',-->
                              <!--children: [-->
                                  <!--{-->
                                      <!--disabled: true,-->
                                      <!--value: 'zhuozhengyuan',-->
                                      <!--label: '拙政园',-->
                                  <!--},-->
                                  <!--{-->
                                      <!--value: 'shizilin',-->
                                      <!--label: '狮子林',-->
                                  <!--}-->
                              <!--]-->
                          <!--}-->
                      <!--],-->
                  <!--}]-->
              <!--}-->
          <!--},-->
          <!--methods: {-->
              <!--handleLoad () {-->
                  <!--this.data2[0].loading = !this.data2[0].loading;-->
              <!--},-->
              <!--loadData (item, cb) {-->
                  <!--item.loading = true;-->
                  <!--setTimeout(() => {-->
                      <!--if (item.value === 'zhejiang') {-->
                          <!--item.children = [-->
                              <!--{-->
                                  <!--value: 'hangzhou',-->
                                  <!--label: '杭州',-->
                                  <!--loading: false,-->
                                  <!--children: []-->
                              <!--}-->
                          <!--];-->
                      <!--} else if (item.value === 'hangzhou') {-->
                          <!--item.children = [-->
                              <!--{-->
                                  <!--value: 'ali',-->
                                  <!--label: '阿里巴巴'-->
                              <!--}-->
                          <!--];-->
                      <!--}-->
                      <!--item.loading = false;-->
                      <!--cb();-->
                  <!--}, 1000);-->
              <!--}-->
          <!--}-->
      <!--}-->
  <!--</script>-->
03a90452   梁灏   update Cascader 
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
202
203
204
205
206
207
208
209
210
211
212
 
  <!--<template>-->
      <!--<Cascader :data="data4" :load-data="loadData"></Cascader>-->
  <!--</template>-->
  <!--<script>-->
      <!--export default {-->
          <!--data () {-->
              <!--return {-->
                  <!--data4: [-->
                      <!--{-->
                          <!--value: 'beijing',-->
                          <!--label: '北京',-->
                          <!--children: [],-->
                          <!--loading: false-->
                      <!--},-->
                      <!--{-->
                          <!--value: 'hangzhou',-->
                          <!--label: '杭州',-->
                          <!--children: [],-->
                          <!--loading:false-->
                      <!--}-->
                  <!--]-->
              <!--}-->
          <!--},-->
          <!--methods: {-->
              <!--loadData (item, callback) {-->
                  <!--item.loading = true;-->
                  <!--setTimeout(() => {-->
                      <!--if (item.value === 'beijing') {-->
                          <!--item.children = [-->
                              <!--{-->
                                  <!--value: 'talkingdata',-->
                                  <!--label: 'TalkingData'-->
                              <!--},-->
                              <!--{-->
                                  <!--value: 'baidu',-->
                                  <!--label: '百度'-->
                              <!--},-->
                              <!--{-->
                                  <!--value: 'sina',-->
                                  <!--label: '新浪'-->
                              <!--}-->
                          <!--];-->
                      <!--} else if (item.value === 'hangzhou') {-->
                          <!--item.children = [-->
                              <!--{-->
                                  <!--value: 'ali',-->
                                  <!--label: '阿里巴巴'-->
                              <!--},-->
                              <!--{-->
                                  <!--value: '163',-->
                                  <!--label: '网易'-->
                              <!--}-->
                          <!--];-->
                      <!--}-->
                      <!--item.loading = false;-->
                      <!--callback();-->
                  <!--}, 1000);-->
              <!--}-->
          <!--}-->
      <!--}-->
  <!--</script>-->
933afc7a   梁灏   fixed #950 
213
47a7f21d   梁灏   support Cascader 
214
 
  <template>
03a90452   梁灏   update Cascader 
215
216
217
218
219
220
221
 
      <!--<Cascader :data="data4" :load-data="loadData" style="width: 200px;"></Cascader>-->
      <div>
          <Cascader :data="data" v-model="model" :load-data="loadData"></Cascader>
          <ul>
              <li v-for="(log, idx) in logs" :key="idx">{{log}}</li>
          </ul>
      </div>
0a48ac45   梁灏   Input add readonl... 
222
223
 
  </template>
  <script>
0a48ac45   梁灏   Input add readonl... 
224
 
      export default {
0a48ac45   梁灏   Input add readonl... 
225
226
 
          data () {
              return {
933afc7a   梁灏   fixed #950 
227
 
                  data4: [
7ec0b533   梁灏   Cascader support ... 
228
 
                      {
933afc7a   梁灏   fixed #950 
229
230
 
                          value: 'beijing',
                          label: '北京',
7ec0b533   梁灏   Cascader support ... 
231
232
233
234
 
                          children: [],
                          loading: false
                      },
                      {
933afc7a   梁灏   fixed #950 
235
236
237
238
 
                          value: 'hangzhou',
                          label: '杭州',
                          children: [],
                          loading:false
7ec0b533   梁灏   Cascader support ... 
239
 
                      }
03a90452   梁灏   update Cascader 
240
241
242
243
244
 
                  ],
                  data: [],
                  model: [340000, 340100, 340104],
                  count: 1,
                  logs: []
65b41a2d   梁灏   fixed #635 
245
 
              }
f7ffdac5   梁灏   Cascader support ... 
246
247
 
          },
          methods: {
933afc7a   梁灏   fixed #950 
248
 
              loadData (item, callback) {
03a90452   梁灏   update Cascader 
249
250
 
                  this.logs.push(`第${this.count}次请求: ${item.value}`)
                  this.count++
f7ffdac5   梁灏   Cascader support ... 
251
252
 
                  item.loading = true;
                  setTimeout(() => {
03a90452   梁灏   update Cascader 
253
 
                      if (item.value === 340000) {
f7ffdac5   梁灏   Cascader support ... 
254
 
                          item.children = [
03a90452   梁灏   update Cascader 
255
 
                              {value: 340100, label: "合肥市", children: [], loading: false}
f7ffdac5   梁灏   Cascader support ... 
256
 
                          ];
03a90452   梁灏   update Cascader 
257
 
                      } else if (item.value === 340100) {
f7ffdac5   梁灏   Cascader support ... 
258
 
                          item.children = [
03a90452   梁灏   update Cascader 
259
260
 
                              {value: 340104, label: "蜀山区"},
                              {value: 340111, label: "包河区"}
f7ffdac5   梁灏   Cascader support ... 
261
262
263
 
                          ];
                      }
                      item.loading = false;
933afc7a   梁灏   fixed #950 
264
 
                      callback();
f7ffdac5   梁灏   Cascader support ... 
265
266
 
                  }, 1000);
              }
03a90452   梁灏   update Cascader 
267
268
269
 
          },
          mounted() {
              this.data = [{value: 340000, label: "安徽省", children: [], loading: false}];
0a48ac45   梁灏   Input add readonl... 
270
271
 
          }
      }
c9433dcc   梁灏   optimize Timeline... 
272
 
  </script>
03a90452   梁灏   update Cascader