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 | <template> | 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 | </template> | 3 | </template> |
223 | <script> | 4 | <script> |
224 | export default { | 5 | export default { |
225 | data () { | 6 | data () { |
226 | return { | 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 | </script> | 59 | </script> |
273 | - |
src/components/cascader/caspanel.vue
@@ -3,7 +3,7 @@ | @@ -3,7 +3,7 @@ | ||
3 | <ul v-if="data && data.length" :class="[prefixCls + '-menu']"> | 3 | <ul v-if="data && data.length" :class="[prefixCls + '-menu']"> |
4 | <Casitem | 4 | <Casitem |
5 | v-for="item in data" | 5 | v-for="item in data" |
6 | - :key="item" | 6 | + :key="getKey()" |
7 | :prefix-cls="prefixCls" | 7 | :prefix-cls="prefixCls" |
8 | :data="item" | 8 | :data="item" |
9 | :tmp-item="tmpItem" | 9 | :tmp-item="tmpItem" |
@@ -17,6 +17,8 @@ | @@ -17,6 +17,8 @@ | ||
17 | import Emitter from '../../mixins/emitter'; | 17 | import Emitter from '../../mixins/emitter'; |
18 | import { findComponentUpward } from '../../utils/assist'; | 18 | import { findComponentUpward } from '../../utils/assist'; |
19 | 19 | ||
20 | + let key = 1; | ||
21 | + | ||
20 | export default { | 22 | export default { |
21 | name: 'Caspanel', | 23 | name: 'Caspanel', |
22 | mixins: [ Emitter ], | 24 | mixins: [ Emitter ], |
@@ -109,6 +111,9 @@ | @@ -109,6 +111,9 @@ | ||
109 | } else { | 111 | } else { |
110 | this.$parent.$parent.updateResult(result); | 112 | this.$parent.$parent.updateResult(result); |
111 | } | 113 | } |
114 | + }, | ||
115 | + getKey () { | ||
116 | + return key++; | ||
112 | } | 117 | } |
113 | }, | 118 | }, |
114 | mounted () { | 119 | mounted () { |