Element-ui select远程搜索
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
template部分:
<el-form-item label="用户" prop="userId">
<el-select
v-model="temp.userId"
placeholder="用户"
filterable
remote
:reserve-keyword="false"
:remote-method="remoteMethod"
:loading="loading"
class="filter-item">
<el-option
v-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 = true
queryAllUser().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()的值要与上方对应
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐


所有评论(0)