iview select标签的赋值和联动

亦凉 2022-03-25 03:36 387阅读 0赞

# select标签的赋值和联动 #

![在这里插入图片描述][20190123154932624.gif]

<div id="app">
    	<div class="field-item">
    		<div class="field-item">
    				<div class="title require">
    					选择省份
    				</div>
    				<div class="control">
    
    					<i-select v-model="searchData.provinceId" clearable>
    						<i-option v-for="item in province" :value="item.id" :key="item.name"  @click.native="getProvince(item)">{ { item.name}}</Option>
    					</i-select>
    				</div>
    			</div>
    			<div class="field-item">
    				<div class="title require">
    					选择城市
    				</div>
    				<div class="control" @click="cityMsg()">
    					<i-select v-model="searchData.cityId" clearable>
    						<i-option v-for="item in cityLists" :value="item.id" :key="item.name"  @click.native="citData(item)">{ {  item.name
    							}}</Option>
    					</i-select>
    				</div>
    			</div>
    			<div class="field-item">
    				<div class="title require">
    					选择区域
    				</div>
    				<div class="control" @click="areaMsg()">
    					<i-select v-model="searchData.areaId" clearable>
    						<i-option v-for="item in areaData" :value="item.id" :key="item.name"  @click.native="areaDatas(item)">{ { 
    							item.name
    							}}</Option>
    					</i-select>
    
    				</div>
    			</div>
    			</div>
    </div>
    
    
    <script>
    		new Vue({ 
    			el: "#vue-object",
    			data: { 
    				searchData:[],
    				province:[],
    				cityLists: [],
    				areaData: [],
    			},
    				created: function () { 
    				this.provinceList();
    				
    
    			},
    			watch: { 
    				'searchData.provinceId': function (val) { 
    					let _this = this;
    					if (val) { 
    						invokeApiSimple(`/auth/crm/district/${ val}/city/list/query`, { }, function (ret) { 
    							if (ret.code == '200') { 
    								_this.cityLists = ret.data;
    								delete _this.searchData.cityId;
    								delete _this.searchData.areaId;
    							}
    						}, false);
    					} else { 
    						_this.cityLists = [];
    						_this.areaData = [];
    						delete _this.searchData.provinceId;
    						delete _this.searchData.cityId;
    						delete _this.searchData.areaId;
    					}
    				},
    				'searchData.cityId': function (val) { 
    					let _this = this;
    					if (val) { 
    						invokeApiSimple(`/auth/crm/district/${ val}/area/list/query`, { }, function (ret) { 
    							if (ret.code == '200') { 
    								_this.areaData = ret.data;
    								delete _this.searchData.areaId;
    							}
    						}, false);
    					} else { 
    						_this.areaData = [];
    						delete _this.searchData.cityId;
    						delete _this.searchData.areaId;
    					}
    				},
    			},
    			method:{ 
    			//获取名称和Id
    			 getProvince(obj) { 
                      this.searchData.provinceName = obj.name;
    
    
                    },
                    citData(obj) { 
                
                        this.searchData.cityName = obj.name;
                    }
                    areaDatas(obj) { 
    
                        this.searchData.areaName = obj.name;
                    },
    
    					//省份
    					provinceList() { 
    					var _self = this;
    					queryParams = { };
    					invokeApiSimple("/auth/crm/district/province/list/query", queryParams, function (ret) { 
    						if (ret.code == "200") { 
    							try { 
    								_self.province = ret.data;
    
    							} catch (error) { 
    								_self.province = [];
    							}
    						}
    
    					});
    				},				
    
    				}
    			
    			
    		)}
    </script>

invokeApiSimple 封装的方法
    /** * 调用快捷方式 * @param {Object} api * @param {Object} params * @param {Object} callback * @param {Object} useMask */
    function invokeApiSimple(api, params, okCallback, useMask, failCallback) { 
    
    	var successFun = function(ret) { 
    		if(ret.code == "200") { 
    			okCallback && okCallback(ret)
    		} else { 
    			if(failCallback) { 
    				failCallback(ret);
    			} else { 
    				errorMsg(ret.data);
    			}
    		}
    	};
    
    	if(useMask) { 
    		invokeApi(api, "POST", params, successFun, invoke_api_error, invoke_loading, invoke_complete);
    	} else { 
    		invokeApi(api, "POST", params, successFun, invoke_api_error);
    	}
    }
    
    /** * 调用快捷方式 * @param {Object} api * @param {Object} params * @param {Object} callback * @param {Object} useMask */
    function invokeApiExt(api, params, callback, useMask) { 
    
    	var successFun = function(ret) { 
    		callback && callback(ret)
    	};
    
    	if(useMask) { 
    		invokeApi(api, "POST", params, successFun, invoke_api_error, invoke_loading, invoke_complete);
    	} else { 
    		invokeApi(api, "POST", params, successFun, invoke_api_error);
    	}
    }
    
    /** * * @param {Object} url * @param {Object} method * @param {Object} data * @param {Object} successFun * @param {Object} errorFun * @param {Object} beforeSendFun * @param {Object} completeFun */
    function invokeApi(url, method, data, successFun, errorFun, beforeSendFun, completeFun) { 
    
    	$.ajax({ 
    		type: method,
    		url: app_server + url,
    		async: true,
    		dataType: 'json',
    		contentType: 'application/json;charset=UTF-8',
    		data: JSON.stringify(data),
    		success: function(rdata) { 
    			successFun && successFun(rdata);
    		},
    		error: function(xhr, textStatus) { 
    			if(errorFun) { 
    				errorFun();
    			} else { 
    				if(invoke_api_error) { 
    					invoke_api_error();
    				} else { 
    					alert("接口调用出现异常");
    				}
    			}
    		},
    
    		beforeSend: function(xhr) { 
    
    			xhr.setRequestHeader('Session-Token', getSessionTokenFromCookie());
    			beforeSendFun && beforeSendFun()
    		},
    
    		complete: function(xhr, msg) { 
    			completeFun && completeFun()
    		}
    	});
    
    }

[20190123154932624.gif]: /images/20220325/c30b87f32f2d47b89d2b5307d9677f16.png