远程搜索功能:
trim()方法去除query的首尾空格。
优化原因:
当在输入框中打入空格依然回去调用接口,优化可以发起调用接口的请求
优化代码:
<template>
<el-select
v-model="value"
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data () {
return {
options: [],
value: [],
list: [],
loading: false,
states: ['李白', '王勃', '白居易']
}
},
mounted () {
this.list = this.states.map(item => {
return { value: `value:${item}`, label: `label:${item}` }
})
},
methods: {
remoteMethod (query) {
const data = query.trim()
if (data !== '') {
console.log('输入非空格才会执行此语句' + 123456)
this.loading = true
setTimeout(() => {
this.loading = false
this.options = this.list.filter(item => {
return item.label.toLowerCase()
.indexOf(data.toLowerCase()) > -1
})
}, 200)
} else {
this.options = []
}
}
}
}
</script>