element-ui 2.4
<script>
export default {
data() {
return {
selectedValue: '',
options: [],
filteredOptions: []
}
},
methods: {
filterMethod(value) {
// 自定义筛选逻辑
this.filteredOptions = this.options.filter(option =>
option.label.toLowerCase().includes(value.toLowerCase())
);
//保留输入的值
this.selectedValue = value
},
handleVisibleChange() {
//远程加载数据,ps:this.$refs.myselect.selectedLabel可以取到输入的值
if (this.options.length == 0) {
this.options = [{ label: 'ab', value: '0' }, { label: 'ac', value: '1' }]
this.filteredOptions = this.options
}
}
}
}
</script>
<template>
<el-form-item label="选择项">
<el-select ref="myselect" v-model="selectedValue" filterable @visible-change="handleVisibleChange"
:filter-method="filterMethod" style="width: 450px;">
<el-option v-for="(item, index) in filteredOptions" :key="index" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</template>