案例 

<template>
	<div>
		<!-- 遠端搜尋 -->
		<!-- filterable、remote、remote-method、loading、label-in-value-->
		<Select
			v-model="searchData.styleId"
			filterable
			clearable
			remote
			:remote-method="remoteMethod"
			:loading="loading"
			label-in-value
			@on-change="hanleStyleChange"
			placeholder="請輸入或選擇"
		>
			<!-- 注意繫結的label和value -->
			<Option v-for="(item, index) in dropList.StyleList" :value="item.Id" :key="index" :label="item.Name">{{ item.Name }}</Option>
		</Select>
		<!-- 本地搜尋：先選倉庫，再選庫位，聯動 -->
		<p>倉庫</p>
		<Select v-model="searchData.wareHouseId" filterable clearable @on-change="hanleHouseChange" @on-clear="handleHouseClear" ref="setHouseQuery">
			<Option v-for="item in dropList.WareHouseList" :value="item.Id" :key="item.Id" :label="item.Name"/>
		</Select>
		<p>庫位</p>
		<Select v-model="searchData.wareShelfId" filterable clearable @on-clear="handleShelfClear" ref="setShelfQuery">
			<Option v-for="item in dropList.WareShelfList" :value="item.Id" :key="item.Id" :label="item.Name"/>
		</Select>

		<p @click="edit">彈窗編輯倉庫庫位時</p>
</template>
<script>
	import m_auth from '@/../mixins/auth'
	export default {
		name: 'initialTest',
		mixins: [m_auth],
		data(){
			return{

				loading: false,
				searchData: {
					styleId: '',

					wareHouseId: '',
					wareShelfId: '',
				},
				dropList: {
					StyleList: [],

					WareHouseList: [],
					WareShelfList: []
				},
				afterData: [],

				formAdd: {
					WareHouseId: '',
					WareHouseName: '',
					WareShelfId: '',
					WareShelfName: '',
				},
			}
		},
		activated() {
			this.getDropHouse();
		},
		methods: {
			remoteMethod (query) {
				if (query !== '') {
					this.loading = true;
					this.getDropStyle(query);
                    setTimeout(() => {
						this.loading = false;
						this.dropList.StyleList = this.afterData;
					}, 200);
                } else {
					this.dropList.StyleList = [];
				}
			},
			//遠端獲取款式資料
			getDropStyle (query) {
				//當query == '款'  時獲取的資料afterData
				let afterData =  [
					{
						"Id":"3db8b88b-ba44-4553-801e-3a2ebcbef4b7",
						"StyleName":"款名111",
						"StyleNumber":"款號111"
					},
					{
						"Id":"929f4880-68ed-4803-8811-3eda092d594c",
						"StyleName":"款名110",
						"StyleNumber":"款號110"
					},
					{
						"Id":"ae36eda5-bc94-4d8a-893a-4623d0d9965a",
						"StyleName":"款名113",
						"StyleNumber":"款號113"
					},
					{
						"Id":"d89b636e-46a5-45f3-b0fb-a5eb77230ad8",
						"StyleName":"測試款",
						"StyleNumber":"123"
					}
				];
				_.each(afterData , item => {
					if (item.StyleName) {
						this.$set(item, 'Name', item.StyleName);
					}
				})
				this.afterData = afterData;
			},
			//選中option款式中的選項返回的label和value值
			hanleStyleChange (value) {
				console.log('vaule------>>', value); 
				//打印出的value ： {
				// 						label:"款名110"
				// 						value:"929f4880-68ed-4803-8811-3eda092d594c"
				//				  }
			},

			//獲取倉庫下拉資料
			getDropHouse (){
				this.dropList.WareHouseList = [
					{
						"Id":"bc7669b0-d502-4683-8599-9543a6b78015",
						"Name":"華中倉",
						"WareShelfList":null
					},
					{
						"Id":"859aad02-6228-435d-ae67-fe810bc434aa",
						"Name":"華南倉",
						"WareShelfList":[
							{
								"Id":"6bafbcb4-6ae7-4fce-849c-8ede4a06303e",
								"Name":"華南小庫位"
							}
						]
					}
				]
			},
			//選中倉庫option中的選項返回的value值： 預設會讀取 slot，無 slot 時，優先讀取該 label 值，無 label 時，讀取 value。
			hanleHouseChange (value) {
				this.dropList.WareShelfList = [];
				let choiceValue = value;
				if (this.searchData.wareHouseId) { //value進行的雙向繫結：獲取到倉庫id後，迴圈匹配到庫位下拉陣列
					_.each( this.dropList.WareHouseList, item => {
						if (choiceValue == item.Id) {
							this.dropList.WareShelfList = item.WareShelfList;
							return false						
						}
					});
				} else {
					this.$refs.setHouseQuery.$data.query = ''; 
					this.$refs.setShelfQuery.$data.query = '';
					return false
				}
			},
			handleHouseClear () {
				this.searchData.wareHouseId = '';
				this.$refs.setHouseQuery.$data.query = ''; //清除下拉選中的項
				this.handleShelfClear ()
			},
			handleShelfClear () {
				this.searchData.wareShelfId = '';
				this.$refs.setShelfQuery.$data.query = '';
			},

			edit () {
				// 請求獲取到倉庫、庫位資料
				let resData = res.data;
				if (resData) {
					//注意： 先把倉庫資料賦值，nextTick把倉庫庫位資料賦值
					this.formAdd['WareHouseId'] = resData.WareHouseId; 
					this.$nextTick( () =>{
						this.formAdd = resData;
					})
				}
			}
			
		}
	}
</script>