【记录】element-ui 输入或搜索数据 el-autocomplete

导读:本篇文章讲解 【记录】element-ui 输入或搜索数据 el-autocomplete,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

效果图如下:

在这里插入图片描述

<el-form-item label='所属角色:' prop='roleName'>
   <el-autocomplete
     @keyup.enter.native='searchList'
     suffix-icon='el-icon-arrow-down'
     v-model='search.roleName'
     placeholder='请选择或输入'
     :fetch-suggestions='querySearchRoleName'
     value-key='roleName'
     value='roleName'
   >
   </el-autocomplete>
 </el-form-item>
 
/**
  * @description 返回输入建议的方法
  * @author 饺子
  * @param { String } queryString 输入的字符
  * @param { Function } cb 回调函数(返回建议列表的数据)
  */
 querySearchRoleName(queryString, cb) {
   const roleList = this.roleList // 下拉框的数据列表
   const results = queryString ? roleList.filter(this.createFilter(queryString)) : roleList
   // 调用 callback 返回建议列表的数据
   cb(results)
 },
 /**
  * @description 筛选包含字符的列表
  * @author 饺子
  * @param { String } queryString 输入的字符
  */
 createFilter(queryString) {
   return (role) => {
     return (role.roleName.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
   }
 },

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/64743.html

(0)
小半的头像小半

相关推荐

半码博客——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!