Element-ui select远程搜索

template部分: 

       <el-form-item label="用户" prop="userId"><el-selectv-model="temp.userId"placeholder="用户"filterableremote:reserve-keyword="false":remote-method="remoteMethod":loading="loading"class="filter-item"><el-optionv-for="item in userIdList":key="item.key":label="item.value":value="item.key"/></el-select></el-form-item>

filterable: 是否可搜索 

remote: 是否为远程搜索

remote-method: 远程搜索方法

reserve-keyword：多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词

js：

data: {//筛选完的部门列表信息userIdFilter:[],// 用来下拉列表模糊查询userIdList:[],
}methods: {getUserIdList() {this.listLoading = truequeryAllUser().then(res => {this.userIdFilter = res.data})},remoteMethod(query) {if (query !== '') {this.loading = true;setTimeout(() => {this.loading = false;this.userIdList = this.userIdFilter.filter(item => {return item.value.toLowerCase().indexOf(query.toLowerCase()) > -1;});}, 200);} else {this.userIdList = [];}},
}

要注意option中应该对应的是用来下拉列表模糊查询

js中return item.value.toLowerCase()的值要与上方对应