<template>
<div>
<el-select v-model="inputValue" multiple collapse-tags filterable remote reserve-keyword
:remote-method="remoteMethod" :loading="loading" placeholder="请选择">
<el-option v-for="(item, index) in list" :key="index" :label="item" :value="item">
</el-option>
</el-select>
</div>
</template>
<script>
// 引入接口
import { getSearch } from '@/api/api.js'
export default {
data () {
return {
// 当前选中的项
selectValue: '',
list: [
{
id: '0',
name: 'a'
},
{
id: '1',
name: 'b'
},
{
id: '2',
name: 'c'
}
]
}
},
methods: {
// 远程搜索
async searchAccount (val) {
console.log(val, '输入的值...');
await getSearch({
name: val // 要传给后台的值
}).then(res => {
if (res.code === 0) {
this.list = res.data
}
})
},
// 远程搜索
remoteMethod (query) {
if (query !== '') {
this.loading = true
this.searchAccount(query)
this.loading = false
} else {
this.list = []
this.searchAccount()
}
},
}
}
</script>
element-ui—— element-ui中的 el-select 实现远程搜索
最新推荐文章于 2024-06-17 11:08:25 发布