element el-select模糊搜索功能
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
这是能查到有数据的
根据输入框的字调取接口查出数据
<el-select v-model="valuee"
style="height:30px;margin-right:20px;"
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading"
@focus="repeatList"
clearable="true"
@change="handleSelectBranchCom">
<el-option v-for="item in dddd"
:key="item.value"
:label="item.label"
style="height:30px"
:value="item.value">
</el-option>
</el-select>
data: function () {
return {
states :'',
list :'',
dddd :'',
searchid :''
}
//在 methods:{} 写入下面代码
handleSelectBranchCom(item) {
console.log('远程搜索选中后返回的item:::::即value的值')
console.log(item)
//如果要获取选择的 id或者名字 从item中取值
this.searchid = item;
console.log(this.searchid)
},
// 搜索模糊查询数据下拉框
remoteMethod(query) {
var that = this;
axios.get('数据接口', {
params: {
comName: query //请求的参数 输入的值
}
})
.then(function (res) {
//将取到的值进行遍历
that.states = res.data.data;
that.list = that.states.map(item => {
// item.uid item.name根据接口里的关键字
return { value: item.uid, label: item.name };
});
})
.catch(function (err) {
console.log(err)
});
setTimeout(() => {
if (query !== '') {
that.loading = true;
setTimeout(() => {
that.loading = false;
that.dddd = that.list.filter(item => {
//这里的label值对应着 上面遍历 return 返回的label:item.name
return item.label.toLowerCase()
.indexOf(query.toLowerCase()) > -1;
});
}, 200);
} else {
that.dddd = [];
}
}, 100);
},
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:5 个月前 )
c345bb45
9 个月前
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 9 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)