近日遇到的需求,需要在输入框输入条件远程搜索服务端数据,Element的select组件正好可以满足此需求。
为了启用远程搜索,需要将filterable和remote设置为true,同时传入一个remote-method。remote-method为一个Function,它会在输入值发生变化时调用,参数为当前输入值。需要注意的是,如果el-option是通过v-for指令渲染出来的,此时需要为el-option添加key属性,且其值需具有唯一性。
<el-select
v-model="value4"
filterable
remote
placeholder="请输入客户名称查询"
:remote-method="remoteMethod"
@change="customerValue"
:loading="loading">
<el-option
v-for="item in list"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
data () {
return {
list: [], // 从服务器端请求的数据
loading: false
}
},
methods: {
// 监听客户输入框,值改变的时候触发
remoteMethod (query) {
this.getCustomer(query) // 调用异步接口(自定义接口名)
if (query !== '') {
this.loading = true
setTimeout(() => {
this.loading = false
this.list = this.list.filter(item => {
return item.label.toLowerCase()
.indexOf(query.toLowerCase()) > -1
})
}, 200)
} else {
this.list = []
}
},
}