Commit e6e970352deab34421f3a978449c765adbba7ce2
1 parent
68b308ee
fixed bug under Vue 2.4.1
Showing
2 changed files
with
55 additions
and
264 deletions
Show diff stats
examples/routers/cascader.vue
1 | -<!--<template>--> | |
2 | - <!--<Row>--> | |
3 | - <!--<i-col span="4">--> | |
4 | - <!--<Button @click="handleLoad">load</Button>--> | |
5 | - <!--{{ v1 }}--> | |
6 | - <!--</i-col>--> | |
7 | - <!--<i-col span="4">--> | |
8 | - <!--<Cascader :data="data2" filterable v-model="v1" style="width: 200px;"></Cascader>--> | |
9 | - <!--<!–<Cascader :data="data2" filterable v-model="v1" :loadData="loadData"></Cascader>–>--> | |
10 | - <!--</i-col>--> | |
11 | - <!--</Row>--> | |
12 | -<!--</template>--> | |
13 | -<!--<script>--> | |
14 | - <!--export default {--> | |
15 | - <!--data () {--> | |
16 | - <!--return {--> | |
17 | - <!--v1: [],--> | |
18 | - <!--data2: [--> | |
19 | - <!--{--> | |
20 | - <!--value: 'zhejiang',--> | |
21 | - <!--label: '浙江',--> | |
22 | - <!--children: [],--> | |
23 | - <!--loading: false--> | |
24 | - <!--},--> | |
25 | - <!--{--> | |
26 | - <!--value: 'jiangsu',--> | |
27 | - <!--label: '江苏',--> | |
28 | - <!--children: [{--> | |
29 | - <!--value: 'nanjing',--> | |
30 | - <!--label: '南京',--> | |
31 | - <!--children: [--> | |
32 | - <!--{--> | |
33 | - <!--value: 'zhonghuamen',--> | |
34 | - <!--label: '中华门'--> | |
35 | - <!--},--> | |
36 | - <!--{--> | |
37 | - <!--value: 'v1',--> | |
38 | - <!--label: 'v111'--> | |
39 | - <!--},--> | |
40 | - <!--{--> | |
41 | - <!--value: 'v2',--> | |
42 | - <!--label: 'v2222'--> | |
43 | - <!--},--> | |
44 | - <!--{--> | |
45 | - <!--value: 'v3',--> | |
46 | - <!--label: 'v333'--> | |
47 | - <!--},--> | |
48 | - <!--{--> | |
49 | - <!--value: 'v4',--> | |
50 | - <!--label: 'v4444'--> | |
51 | - <!--},--> | |
52 | - <!--{--> | |
53 | - <!--value: 'v5',--> | |
54 | - <!--label: 'v555'--> | |
55 | - <!--},--> | |
56 | - <!--{--> | |
57 | - <!--value: 'v6',--> | |
58 | - <!--label: 'v666'--> | |
59 | - <!--},--> | |
60 | - <!--{--> | |
61 | - <!--value: 'v7',--> | |
62 | - <!--label: 'v777'--> | |
63 | - <!--}--> | |
64 | - <!--]--> | |
65 | - <!--}]--> | |
66 | - <!--}--> | |
67 | - <!--],--> | |
68 | - <!--data3: [{--> | |
69 | - <!--value: 'beijing',--> | |
70 | - <!--label: '北京',--> | |
71 | - <!--children: [--> | |
72 | - <!--{--> | |
73 | - <!--value: 'gugong',--> | |
74 | - <!--label: '故宫'--> | |
75 | - <!--},--> | |
76 | - <!--{--> | |
77 | - <!--value: 'tiantan',--> | |
78 | - <!--label: '天坛'--> | |
79 | - <!--},--> | |
80 | - <!--{--> | |
81 | - <!--value: 'wangfujing',--> | |
82 | - <!--label: '王府井'--> | |
83 | - <!--}--> | |
84 | - <!--]--> | |
85 | - <!--}, {--> | |
86 | - <!--value: 'jiangsu',--> | |
87 | - <!--label: '江苏',--> | |
88 | - <!--children: [--> | |
89 | - <!--{--> | |
90 | - <!--value: 'nanjing',--> | |
91 | - <!--label: '南京',--> | |
92 | - <!--children: [--> | |
93 | - <!--{--> | |
94 | - <!--value: 'fuzimiao',--> | |
95 | - <!--label: '夫子庙',--> | |
96 | - <!--}--> | |
97 | - <!--]--> | |
98 | - <!--},--> | |
99 | - <!--{--> | |
100 | - <!--value: 'suzhou',--> | |
101 | - <!--label: '苏州',--> | |
102 | - <!--children: [--> | |
103 | - <!--{--> | |
104 | - <!--disabled: true,--> | |
105 | - <!--value: 'zhuozhengyuan',--> | |
106 | - <!--label: '拙政园',--> | |
107 | - <!--},--> | |
108 | - <!--{--> | |
109 | - <!--value: 'shizilin',--> | |
110 | - <!--label: '狮子林',--> | |
111 | - <!--}--> | |
112 | - <!--]--> | |
113 | - <!--}--> | |
114 | - <!--],--> | |
115 | - <!--}]--> | |
116 | - <!--}--> | |
117 | - <!--},--> | |
118 | - <!--methods: {--> | |
119 | - <!--handleLoad () {--> | |
120 | - <!--this.data2[0].loading = !this.data2[0].loading;--> | |
121 | - <!--},--> | |
122 | - <!--loadData (item, cb) {--> | |
123 | - <!--item.loading = true;--> | |
124 | - <!--setTimeout(() => {--> | |
125 | - <!--if (item.value === 'zhejiang') {--> | |
126 | - <!--item.children = [--> | |
127 | - <!--{--> | |
128 | - <!--value: 'hangzhou',--> | |
129 | - <!--label: '杭州',--> | |
130 | - <!--loading: false,--> | |
131 | - <!--children: []--> | |
132 | - <!--}--> | |
133 | - <!--];--> | |
134 | - <!--} else if (item.value === 'hangzhou') {--> | |
135 | - <!--item.children = [--> | |
136 | - <!--{--> | |
137 | - <!--value: 'ali',--> | |
138 | - <!--label: '阿里巴巴'--> | |
139 | - <!--}--> | |
140 | - <!--];--> | |
141 | - <!--}--> | |
142 | - <!--item.loading = false;--> | |
143 | - <!--cb();--> | |
144 | - <!--}, 1000);--> | |
145 | - <!--}--> | |
146 | - <!--}--> | |
147 | - <!--}--> | |
148 | -<!--</script>--> | |
149 | - | |
150 | -<!--<template>--> | |
151 | - <!--<Cascader :data="data4" :load-data="loadData"></Cascader>--> | |
152 | -<!--</template>--> | |
153 | -<!--<script>--> | |
154 | - <!--export default {--> | |
155 | - <!--data () {--> | |
156 | - <!--return {--> | |
157 | - <!--data4: [--> | |
158 | - <!--{--> | |
159 | - <!--value: 'beijing',--> | |
160 | - <!--label: '北京',--> | |
161 | - <!--children: [],--> | |
162 | - <!--loading: false--> | |
163 | - <!--},--> | |
164 | - <!--{--> | |
165 | - <!--value: 'hangzhou',--> | |
166 | - <!--label: '杭州',--> | |
167 | - <!--children: [],--> | |
168 | - <!--loading:false--> | |
169 | - <!--}--> | |
170 | - <!--]--> | |
171 | - <!--}--> | |
172 | - <!--},--> | |
173 | - <!--methods: {--> | |
174 | - <!--loadData (item, callback) {--> | |
175 | - <!--item.loading = true;--> | |
176 | - <!--setTimeout(() => {--> | |
177 | - <!--if (item.value === 'beijing') {--> | |
178 | - <!--item.children = [--> | |
179 | - <!--{--> | |
180 | - <!--value: 'talkingdata',--> | |
181 | - <!--label: 'TalkingData'--> | |
182 | - <!--},--> | |
183 | - <!--{--> | |
184 | - <!--value: 'baidu',--> | |
185 | - <!--label: '百度'--> | |
186 | - <!--},--> | |
187 | - <!--{--> | |
188 | - <!--value: 'sina',--> | |
189 | - <!--label: '新浪'--> | |
190 | - <!--}--> | |
191 | - <!--];--> | |
192 | - <!--} else if (item.value === 'hangzhou') {--> | |
193 | - <!--item.children = [--> | |
194 | - <!--{--> | |
195 | - <!--value: 'ali',--> | |
196 | - <!--label: '阿里巴巴'--> | |
197 | - <!--},--> | |
198 | - <!--{--> | |
199 | - <!--value: '163',--> | |
200 | - <!--label: '网易'--> | |
201 | - <!--}--> | |
202 | - <!--];--> | |
203 | - <!--}--> | |
204 | - <!--item.loading = false;--> | |
205 | - <!--callback();--> | |
206 | - <!--}, 1000);--> | |
207 | - <!--}--> | |
208 | - <!--}--> | |
209 | - <!--}--> | |
210 | -<!--</script>--> | |
211 | - | |
212 | - | |
213 | - | |
214 | 1 | <template> |
215 | - <!--<Cascader :data="data4" :load-data="loadData" style="width: 200px;"></Cascader>--> | |
216 | - <div> | |
217 | - <Cascader :data="data" v-model="model" :load-data="loadData"></Cascader> | |
218 | - <ul> | |
219 | - <li v-for="(log, idx) in logs" :key="idx">{{log}}</li> | |
220 | - </ul> | |
221 | - </div> | |
2 | + <Cascader v-model="value3" :data="data" filterable></Cascader> | |
222 | 3 | </template> |
223 | 4 | <script> |
224 | 5 | export default { |
225 | 6 | data () { |
226 | 7 | return { |
227 | - data4: [ | |
228 | - { | |
229 | - value: 'beijing', | |
230 | - label: '北京', | |
231 | - children: [], | |
232 | - loading: false | |
233 | - }, | |
234 | - { | |
235 | - value: 'hangzhou', | |
236 | - label: '杭州', | |
237 | - children: [], | |
238 | - loading:false | |
239 | - } | |
240 | - ], | |
241 | - data: [], | |
242 | - model: [340000, 340100, 340104], | |
243 | - count: 1, | |
244 | - logs: [] | |
8 | + data: [{ | |
9 | + value: 'beijing', | |
10 | + label: '北京', | |
11 | + children: [ | |
12 | + { | |
13 | + value: 'gugong', | |
14 | + label: '故宫' | |
15 | + }, | |
16 | + { | |
17 | + value: 'tiantan', | |
18 | + label: '天坛' | |
19 | + }, | |
20 | + { | |
21 | + value: 'wangfujing', | |
22 | + label: '王府井' | |
23 | + } | |
24 | + ] | |
25 | + }, { | |
26 | + value: 'jiangsu', | |
27 | + label: '江苏', | |
28 | + children: [ | |
29 | + { | |
30 | + value: 'nanjing', | |
31 | + label: '南京', | |
32 | + children: [ | |
33 | + { | |
34 | + value: 'fuzimiao', | |
35 | + label: '夫子庙', | |
36 | + } | |
37 | + ] | |
38 | + }, | |
39 | + { | |
40 | + value: 'suzhou', | |
41 | + label: '苏州', | |
42 | + children: [ | |
43 | + { | |
44 | + value: 'zhuozhengyuan', | |
45 | + label: '拙政园', | |
46 | + }, | |
47 | + { | |
48 | + value: 'shizilin', | |
49 | + label: '狮子林', | |
50 | + } | |
51 | + ] | |
52 | + } | |
53 | + ], | |
54 | + }], | |
55 | + value3: [] | |
245 | 56 | } |
246 | - }, | |
247 | - methods: { | |
248 | - loadData (item, callback) { | |
249 | - this.logs.push(`第${this.count}次请求: ${item.value}`) | |
250 | - this.count++ | |
251 | - item.loading = true; | |
252 | - setTimeout(() => { | |
253 | - if (item.value === 340000) { | |
254 | - item.children = [ | |
255 | - {value: 340100, label: "合肥市", children: [], loading: false} | |
256 | - ]; | |
257 | - } else if (item.value === 340100) { | |
258 | - item.children = [ | |
259 | - {value: 340104, label: "蜀山区"}, | |
260 | - {value: 340111, label: "包河区"} | |
261 | - ]; | |
262 | - } | |
263 | - item.loading = false; | |
264 | - callback(); | |
265 | - }, 1000); | |
266 | - } | |
267 | - }, | |
268 | - mounted() { | |
269 | - this.data = [{value: 340000, label: "安徽省", children: [], loading: false}]; | |
270 | 57 | } |
271 | 58 | } |
272 | 59 | </script> |
273 | - | ... | ... |
src/components/cascader/caspanel.vue
... | ... | @@ -3,7 +3,7 @@ |
3 | 3 | <ul v-if="data && data.length" :class="[prefixCls + '-menu']"> |
4 | 4 | <Casitem |
5 | 5 | v-for="item in data" |
6 | - :key="item" | |
6 | + :key="getKey()" | |
7 | 7 | :prefix-cls="prefixCls" |
8 | 8 | :data="item" |
9 | 9 | :tmp-item="tmpItem" |
... | ... | @@ -17,6 +17,8 @@ |
17 | 17 | import Emitter from '../../mixins/emitter'; |
18 | 18 | import { findComponentUpward } from '../../utils/assist'; |
19 | 19 | |
20 | + let key = 1; | |
21 | + | |
20 | 22 | export default { |
21 | 23 | name: 'Caspanel', |
22 | 24 | mixins: [ Emitter ], |
... | ... | @@ -109,6 +111,9 @@ |
109 | 111 | } else { |
110 | 112 | this.$parent.$parent.updateResult(result); |
111 | 113 | } |
114 | + }, | |
115 | + getKey () { | |
116 | + return key++; | |
112 | 117 | } |
113 | 118 | }, |
114 | 119 | mounted () { | ... | ... |