vue + iview + select + 本地搜索或远程搜索

案例 

<template>
	<div>
		<!--1、 远程搜索 -->
		<!-- 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="请输入或选择"
            ref="setStyle"
		>
			<!-- 注意绑定的label和value -->
			<Option v-for="(item, index) in dropList.StyleList" :value="item.Id" :key="index" :label="item.Name">{{ item.Name }}</Option>
		</Select>


		<!--2、 本地搜索：先选仓库，再选库位，联动 -->
		<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>
	export default {
		name: 'initialTest',
		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);
                                 } else {
					this.dropList.StyleList = [];
				}
			},
			//远程获取款式数据
			getDropStyle (query) {
				//当query != ''  时请求获取数据
				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"
					}
				];
                        this.loading = false;
                        if (afterData && afterData.length > 0) {
                                _.each(afterData , item => {
				        if (item.StyleName) {
					        this.$set(item, 'Name', item.StyleName);
				        }
			        })
				 this.afterData = afterData;
                        } else {
                            this.$refs.setStyle.$data.query = '';
                            this.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>