案例?

<template><div><!--1、 遠程搜索 --><!-- filterable、remote、remote-method、loading、label-in-value--><Selectv-model="searchData.styleId"filterableclearableremote: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>

?

總結

以上是生活随笔為你收集整理的vue + iview + select + 本地搜索或远程搜索的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。