Я использую element-ui и vuejs. У меня есть элемент выбора, который выглядит так
<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 для компонента точно так же, как ref = "select1"
а затем вы можете вызвать метод focus или blur с помощью this. $ 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 = [];
},