element UI 制作模糊搜索框
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
如图所示,当你输入某个关键字时,去掉用某个接口,然后通过关键字获取数据。
View Code
<el-autocomplete
class="inline-input"
v-model="form.tName"
:fetch-suggestions="querySearch"
placeholder="input teacher name!"
:trigger-on-focus="false"
@select="handleSelect">
</el-autocomplete>
JS Code
// 模糊搜索 (通过接口拿到数据,将值赋给value,value未模糊匹配搜索到的值)
querySearch(queryString, cb) {
TeacherSalary.getTeacherName({ teacherName: queryString })
.then((res) => {
const { code, data } = res;
if (code === 0) {
this.teacherNameList = data;
this.teacherNameList.forEach((element) => {
element.value = element.tName;
});
const results = queryString ? this.teacherNameList.filter(this.createFilter(queryString)) : this.teacherNameList;
cb(results);
}
})
.catch(err => err);
},
createFilter(queryString) {
return name => (name.tName.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
},
handleSelect(item) {
this.form.T = item.id;
}
注意点:
(1)`name.tName.toLowerCase().indexOf(queryString.toLowerCase()) === 0` 表示从第一个开始匹配
(2)`name.tName.toLowerCase().indexOf(queryString.toLowerCase()) > -1` 表示有该关键字的都可以匹配到
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 个月前
更多推荐
已为社区贡献12条内容
所有评论(0)