在这里插入图片描述

如图所示,当你输入某个关键字时,去掉用某个接口,然后通过关键字获取数据。


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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐