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

我就是我 2022-05-16 03:26 301阅读 0赞

案例

<template>
    	<div>
    		
    		
    		<Select
    			v-model="searchData.styleId"
    			filterable
    			clearable
    			remote
    			:remote-method="remoteMethod"
    			:loading="loading"
    			label-in-value
    			@on-change="hanleStyleChange"
    			placeholder="请输入或选择"
                ref="setStyle"
    		>
    			
    			<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>
    	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>