Commit e6e970352deab34421f3a978449c765adbba7ce2

Authored by 梁灏
1 parent 68b308ee

fixed bug under Vue 2.4.1

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   - <!--&lt;!&ndash;<Cascader :data="data2" filterable v-model="v1" :loadData="loadData"></Cascader>&ndash;&gt;-->
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 () {
... ...