Element-uiとvuejsを使用しています。このようなselect要素があります
<el-form-item label="City" prop="city">
<el-select
v-model="form.city"
multiple
filterable
remote
auto-complete = "address-level2"
no-match-text = "No data found"
:remote-method = "remoteMethod"
:loading = "loading"
placeholder="Select City">
<el-option
v-for = "(item,index) in cities"
:key = "index"
:label = "item.name"
:value = "item.key"
></el-option>
</el-select>
</el-form-item>
ここで、ユーザーがオプションを選択した後にこの選択のぼかしイベントをトリガーして、ドロップダウンオプションを折りたたむようにします。
これは私のリモートメソッドです
remoteMethod: _.throttle(function(query) {
this.loading = true;
axios({
method: 'get',
url: someUrl
}).then(response =>{
if(response.data.status === false){
this.$notify.error({
title: 'Error',
message: response.data.message
});
}
else if(response.data.status === true && response.data.data.length != 0){
this.loading = false;
this.cities = response.data.data;
}
})
}, 1500),
ref = "select1"のように、コンポーネントにrefプロパティを設定できます。
次に、これによってフォーカスまたはブラーメソッドを呼び出すことができます。$ refs
ちょうど同じように:this。$ refs.select1.focus()
ユーザーがオプションを選択した後にドロップダウンオプションを非表示にする場合は、イベントchange
でリモートから取得したデータをリセットするだけです。
例:
選択した値が変更されたら、メソッドresetData()
を呼び出します。
<el-form-item label="City" prop="city">
<el-select
@change="resetData"
v-model="form.city"
multiple
filterable
remote
auto-complete = "address-level2"
no-match-text = "No data found"
:remote-method = "remoteMethod"
:loading = "loading"
placeholder="Select City">
<el-option
v-for = "(item,index) in cities"
:key = "index"
:label = "item.name"
:value = "item.key">
</el-option>
</el-select>
</el-form-item>
リモートから取得するデータをリセットします。
resetData() {
this.cities = [];
},