element UI 制作模糊搜索框

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

View Code

    <el-autocompleteclass="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`    表示有该关键字的都可以匹配到

element UI 制作模糊搜索框相关推荐

easyui前端实现多选框_前端：Element UI 多选框组用法笔记
今天给大家分享一下Element UI 多选框组用法笔记,直接上代码! "兴趣爱好:"> "form.checkList"> for= {{item ...
前端：Element UI 多选框组用法笔记
今天给大家分享一下Element UI 多选框组用法笔记,直接上代码! <html><head></head><body><el-form> ...
使用vue+Element ui制作56个民族下拉列表
使用vue+Element ui制作56个民族下拉列表 1.页面 <template><div><el-select v-model="nationvalue& ...
Element UI 自定义穿梭框的数据项
文章目录需求官网说明实现效果具体步骤附加需求:调节穿梭框高宽度需求穿梭框中显示的内容是包含多个字段的数据(把表格的几个字段在穿梭框中展示)以及修改相应的样式,查看 Element UI ...
element ui中穿梭框等列表文字显示过长隐藏问题处理
主要记录一下element ui组件中穿梭框.table列表内容显示不全解决方式对于Transfer 穿梭框中的文字过长隐藏问题处理: 1.实现效果: 解决方式; 1. <el-row :gu ...
vue下拉框值改变事件_vue和element ui 下拉框select的change事件
1 在线编辑测试工具编辑好代码后点击 run 即可 2 vue原生写法 2.1 html部分新增空 {{ drug.name }} 刪除尚未新增任何資料總金額:{{ totalMoney } ...
icworks+D2Admin+vue+element UI 制作后台管理
前言: icworks又名飞冰海量可复用物料,通过 GUI 工具极速构建中后台应用.是阿里巴巴前端团队开源的一个产品,目的让前端开发简单而友好. 进入正题使用以及构建项目非常简单 1.直接进入官网 ...
记录element ui dialog弹框生命周期问题
今天在开发中遇到一个问题,描述如下: 点击编辑然后将列表中的数据回显出来: 场景为这样: 这个弹框是一个组件,通过父子组件传参将参数传递过去,问题是我在什么时候回显数据呢? 应该是在组件被创建时,也就 ...
element ui 下拉框搜索功能
正常的下拉框就是这样的,但是临时加需求说需要下拉框里面的信息不存在或者太多的时候,希望自己搜索想要的数据嗯~听产品的~解决了一下代码如下 <el-select :placeholder=&q ...

element UI 制作模糊搜索框

element UI 制作模糊搜索框相关推荐

最新文章

热门文章