@@ -89,129 +89,211 @@ const APIData = [
89
89
}
90
90
];
91
91
export default {
92
- data () {
93
- return {
94
- date: null ,
95
- isVisible0: false ,
96
- listData0: [
97
- [' 2010' , ' 2011' , ' 2012' , ' 2013' , ' 2014' , ' 2015' , ' 2016' ,' 2017' , ' 2018' , ' 2019' , ' 2020' , ' 2021' , ' 2022' , ' 2023' ],
98
- [' 1' , ' 2' , ' 3' , ' 4' , ' 5' , ' 6' , ' 7' , ' 8' , ' 9' , ' 10' , ' 11' , ' 12' ]
99
- ],
100
- defaultValueData0: [' 2012' , ' 2' ],
101
- city: null ,
102
- isVisible: false ,
103
- data: {
104
- ' 北京' : [' 北京' ],
105
- ' 黑龙江' : [' 哈尔滨' ,' 绥化' ,' 漠河' ,' 大兴安岭' ,' 牡丹江' ,' 佳木斯' ,' 齐齐哈尔' ,' 大庆' ,' 五大连池' ],
106
- ' 江西' : [' 九江' , ' 南昌' , ' 赣州' ],
107
- ' 上海' : [' 上海' ],
108
- ' 重庆' : [' 重庆' ],
109
- ' 内蒙古' : [' 呼和浩特' , ' 呼和浩特1' ,' 呼和浩特2' , ' 呼和浩特3' ,' 呼和浩特4' , ' 呼和浩特5' ,' 呼和浩特6' , ' 呼和浩特7' ]
110
- },
111
- dataSub: {
112
- ' 上海' : [' 测试1' , ' 测试2' ],
113
- ' 北京' : [' 西城区' , ' 东城区' , ' 大兴区' , ' 朝阳区' , ' 海淀区' ],
114
- ' 南昌' : [' 青山湖区' , ' 西湖区' , ' 宏都中路' , ' 梦时代' , ' 八一广场' ],
115
- ' 绥化' : [' 明水' , ' 拜泉' ],
116
- ' 哈尔滨' : [' 道里区' , ' 道外区' ]
117
- },
118
- listData: [
119
- [ ' 上海' , ' 黑龙江' , ' 北京' , ' 重庆' , ' 江西' ,' 内蒙古' ]
120
- ],
121
- defaultValueData: null ,
122
- year: null ,
123
- isVisible1: false ,
124
- listData1: [[' 2010' , ' 2011' , ' 2012' , ' 2013' , ' 2014' , ' 2015' , ' 2016' ,' 2017' , ' 2018' ]],
125
- custmerCityData: [
126
- [{
127
- label: 1 ,
128
- value: " 北京"
129
- },
130
- {
131
- label: 2 ,
132
- value: " 上海"
133
- }]
134
- ],
135
- cityCustmer: null ,
136
- isVisible2: false ,
137
- defaultValueData1: null
138
- };
139
- };
92
+ data () {
93
+ return {
94
+ date: null ,
95
+ isVisible0: false ,
96
+ listData0: [
97
+ [
98
+ " 2010" ,
99
+ " 2011" ,
100
+ " 2012" ,
101
+ " 2013" ,
102
+ " 2014" ,
103
+ " 2015" ,
104
+ " 2016" ,
105
+ " 2017" ,
106
+ " 2018" ,
107
+ " 2019" ,
108
+ " 2020" ,
109
+ " 2021" ,
110
+ " 2022" ,
111
+ " 2023" ,
112
+ " 2024" ,
113
+ " 2025" ,
114
+ " 2026" ,
115
+ " 2027" ,
116
+ " 2028" ,
117
+ " 2029" ,
118
+ " 2030" ,
119
+ " 2031" ,
120
+ " 2032" ,
121
+ " 2033" ,
122
+ " 2034" ,
123
+ " 2035" ,
124
+ " 2036" ,
125
+ " 2037" ,
126
+ " 2038" ,
127
+ " 2039"
128
+ ],
129
+ [" 1" , " 2" , " 3" , " 4" , " 5" , " 6" , " 7" , " 8" , " 9" , " 10" , " 11" , " 12" ]
130
+ ],
131
+ defaultValueData0: [" 2012" , " 2" ],
132
+ city: null ,
133
+ isVisible: false ,
134
+ data: {
135
+ 北京: [" 北京" ],
136
+ 黑龙江: [
137
+ " 哈尔滨" ,
138
+ " 绥化" ,
139
+ " 漠河" ,
140
+ " 大兴安岭" ,
141
+ " 牡丹江" ,
142
+ " 佳木斯" ,
143
+ " 齐齐哈尔" ,
144
+ " 大庆" ,
145
+ " 五大连池"
146
+ ],
147
+ 江西: [" 九江" , " 南昌" , " 赣州" ],
148
+ 上海: [" 上海" ],
149
+ 重庆: [" 重庆" ],
150
+ 内蒙古: [
151
+ " 呼和浩特" ,
152
+ " 呼和浩特1" ,
153
+ " 呼和浩特2" ,
154
+ " 呼和浩特3" ,
155
+ " 呼和浩特4" ,
156
+ " 呼和浩特5" ,
157
+ " 呼和浩特6" ,
158
+ " 呼和浩特7"
159
+ ]
160
+ },
161
+ dataSub: {
162
+ 上海: [" 测试1" , " 测试2" ],
163
+ 北京: [" 西城区" , " 东城区" , " 大兴区" , " 朝阳区" , " 海淀区" ],
164
+ 南昌: [" 青山湖区" , " 西湖区" , " 宏都中路" , " 梦时代" , " 八一广场" ],
165
+ 绥化: [" 明水" , " 拜泉" ],
166
+ 哈尔滨: [" 道里区" , " 道外区" ]
167
+ },
168
+ listData: [[" 上海" , " 黑龙江" , " 北京" , " 重庆" , " 江西" , " 内蒙古" ]],
169
+ defaultValueData: null ,
170
+ year: null ,
171
+ isVisible1: false ,
172
+ listData1: [[" 2018" , " 2019" ," 2010" ]],
173
+ custmerCityData: [
174
+ [
175
+ {
176
+ label: 1 ,
177
+ value: " 北京"
178
+ },
179
+ {
180
+ label: 2 ,
181
+ value: " 上海"
182
+ }
183
+ ]
184
+ ],
185
+ cityCustmer: null ,
186
+ isVisible2: false ,
187
+ defaultValueData1: null
188
+ };
189
+ },
190
+ created () {
191
+ this .listData = [
192
+ ... [this .listData [0 ]],
193
+ this .data [this .listData [0 ][0 ]],
194
+ this .dataSub [this .data [this .listData [0 ][0 ]]]
195
+ ];
196
+ },
197
+ methods: {
198
+ switchPicker (param ) {
199
+ this [` ${ param} ` ] = ! this [` ${ param} ` ];
200
+ },
201
+
202
+ setChooseValue0 (chooseData ) {
203
+ this .date = ` ${ chooseData[0 ]} 年${ chooseData[1 ]} 月` ;
204
+ },
205
+
206
+ setYearValue (chooseData ) {
207
+ this .year = ` ${ chooseData[0 ]} 年` ;
208
+ },
209
+
210
+ modifyCity () {
211
+ this .updateLinkage (" " , " 重庆" , 1 , " 重庆" );
212
+ this .defaultValueData = [" 重庆" , " 重庆" ];
140
213
},
141
- created () {
142
- this .listData = [... [this .listData [0 ]], this .data [this .listData [0 ][0 ]], this .dataSub [this .data [this .listData [0 ][0 ]]] ];
214
+
215
+ modifyYear () {
216
+ this .defaultValueData1 = [" 2018" ];
143
217
},
144
- methods: {
145
- switchPicker (param ) {
146
- this [` ${ param} ` ] = ! this [` ${ param} ` ];
147
- },
148
-
149
- setChooseValue0 (chooseData ) {
150
- this .date = ` ${ chooseData[0 ]} 年${ chooseData[1 ]} 月` ;
151
- },
152
-
153
- setChooseValue (chooseData ) {
154
- this .city = ` ${ chooseData[0 ]} -${ chooseData[1 ]}${ chooseData[2 ] ? ' -' + chooseData[2 ] : ' ' } ` ;
155
- },
156
-
157
- setYearValue (chooseData ) {
158
- this .year = ` ${ chooseData[0 ]} 年` ;
159
- },
160
-
161
- updateLinkage (self , value , index , chooseValue , cacheValueData ) {
162
- if (! value) {
163
- return false ;
164
- }
165
- switch (index) {
166
- case 1 :
167
- let i = this .listData [0 ].indexOf (value);
168
- this .listData .splice (index, 1 , [... this .data [this .listData [0 ][i]]]);
169
- chooseValue = chooseValue ? chooseValue : this .listData [index][0 ];
170
- self && self .updateChooseValue (self , index, chooseValue);
171
- this .updateLinkage (self , chooseValue, 2 , (cacheValueData && cacheValueData[2 ] ? cacheValueData[2 ] : null ));
172
- break ;
173
- case 2 :
174
- let areaData = this .dataSub [value] ? this .dataSub [value] : [];
175
- this .listData .splice (index, 1 , [... areaData]);
176
- chooseValue = chooseValue ? chooseValue : this .listData [index][0 ];
177
- self && self .updateChooseValue (self , index, chooseValue);
178
- break ;
179
- }
180
- },
181
-
182
- updateChooseValue (self , index , value , cacheValueData ) {
183
- index < 2 && this .updateLinkage (self , value, (index + 1 ), null );
184
- },
185
-
186
- closeUpdateChooseValue (self , chooseData ) {
187
- this .updateLinkage (self , chooseData[0 ], 1 , chooseData[1 ], chooseData);
188
- },
189
- setChooseValueCustmer (chooseData ) {
190
- var str = chooseData .map (item => item .value ).join (" -" );
191
- this .cityCustmer = str;
192
- },
193
- closeUpdateChooseValueCustmer (self , chooseData ) {
194
- this .setChooseValueCustmer (chooseData);
195
- },
196
- updateChooseValueCustmer (self , index , resValue , cacheValueData ) {
197
- let { label, value } = resValue;
198
- // 此处模拟查询API
199
- setTimeout (() => {
200
- var resItems = APIData .find (item => item .label == label);
201
- if (resItems && resItems .array .length ) {
202
- this .$set (this .custmerCityData , index + 1 , resItems .array );
203
- }
204
- }, 100 );
205
- },
206
- modifyCity () {
207
- this .updateLinkage (' ' , ' 重庆' , 1 , ' 重庆' );
208
- this .defaultValueData = [' 重庆' , ' 重庆' ];
209
- },
210
-
211
- modifyYear (){
212
- this .defaultValueData1 = [' 2018' ];
213
- }
218
+
219
+ // demo 城市选择(联动) start
220
+ setChooseValue (chooseData ) {
221
+ this .city = ` ${ chooseData[0 ]} -${ chooseData[1 ]}${
222
+ chooseData[2 ] ? " -" + chooseData[2 ] : " "
223
+ } ` ;
224
+ },
225
+
226
+ updateLinkage (self , value , index , chooseValue , cacheValueData ) {
227
+ if (! value) {
228
+ return false ;
229
+ }
230
+ switch (index) {
231
+ case 1 :
232
+ let i = this .listData [0 ].indexOf (value);
233
+ this .listData .splice (index, 1 , [... this .data [this .listData [0 ][i]]]);
234
+ chooseValue = chooseValue ? chooseValue : this .listData [index][0 ];
235
+ self && self .updateChooseValue (self , index, chooseValue);
236
+ this .updateLinkage (
237
+ self ,
238
+ chooseValue,
239
+ 2 ,
240
+ cacheValueData && cacheValueData[2 ] ? cacheValueData[2 ] : null
241
+ );
242
+ break ;
243
+ case 2 :
244
+ let areaData = this .dataSub [value] ? this .dataSub [value] : [];
245
+ this .listData .splice (index, 1 , [... areaData]);
246
+ chooseValue = chooseValue ? chooseValue : this .listData [index][0 ];
247
+ self && self .updateChooseValue (self , index, chooseValue);
248
+ break ;
249
+ }
250
+ },
251
+
252
+ updateChooseValue (self , index , value , cacheValueData ) {
253
+ index < 2 && this .updateLinkage (self , value, index + 1 , null );
254
+ },
255
+
256
+ closeUpdateChooseValue (self , chooseData ) {
257
+ this .updateLinkage (self , chooseData[0 ], 1 , chooseData[1 ], chooseData);
258
+ },
259
+ // demo 城市选择(联动) end
260
+ setChooseValueCustmer (chooseData ) {
261
+ // alert(JSON.stringify(chooseData));
262
+ var str = chooseData .map (item => item .value ).join (" -" );
263
+ this .cityCustmer = str;
264
+ },
265
+
266
+ closeUpdateChooseValueCustmer (self , chooseData ) {
267
+ // 此处模拟查询API,如果数据缓存了不需要再重新请求
268
+ setTimeout (() => {
269
+ let { label, value } = chooseData[0 ];
270
+ var resItems = APIData .find (item => item .label == label);
271
+ if (resItems && resItems .array .length ) {
272
+ this .$set (this .custmerCityData , 1 , resItems .array );
273
+
274
+ // 复原位置
275
+ self .updateChooseValue (self , 0 , chooseData[0 ]);
276
+ self .updateChooseValue (self , 1 , chooseData[1 ]);
277
+ }
278
+ }, 100 );
279
+ },
280
+
281
+ updateChooseValueCustmer (self , index , resValue , cacheValueData ) {
282
+ // 本demo为二级联动,所以限制只有首列变动的时候触发事件
283
+ if (index === 0 ) {
284
+ // 此处模拟查询API,如果数据缓存了不需要再重新请求
285
+ let { label, value } = resValue;
286
+ setTimeout (() => {
287
+ var resItems = APIData .find (item => item .label == label);
288
+ if (resItems && resItems .array .length ) {
289
+ this .$set (this .custmerCityData , 1 , resItems .array );
290
+ // 更新第二列位置
291
+ self .updateChooseValue (self , index + 1 , this .custmerCityData [1 ][0 ]);
292
+ }
293
+ }, 100 );
294
+ }
214
295
}
296
+ }
215
297
};
216
298
```
217
299
0 commit comments