el-autocomplete 的使用

在这里插入图片描述
在这里插入图片描述

<el-form-item label="项目选择" prop="projectReimbursement.projectId"  :verify="['NotNull']">
  <el-autocomplete
    clearable
    class="inline-input"
    v-model="detailForm.projectReimbursement.projectName"
    :fetch-suggestions="querySearch"
    value-key="projectName"
    placeholder="请输入项目"
    @select="handleSelect"
  ></el-autocomplete>
</el-form-item>
querySearch(queryString, cb) {
  var restaurants = this.projectOptions;
  var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
  // 调用 callback 返回建议列表的数据
  cb(results);
},
createFilter(queryString) {
  return (restaurant) => {
    return (restaurant.projectName.indexOf(queryString.toLowerCase()) === 0);
  };
},
handleSelect(item) {
  this.detailForm.projectReimbursement.projectId = item.id;
  console.log(item);
},

value-key=“projectName” 输入建议对象中用于显示的键名
return (restaurant.projectName.indexOf(queryString.toLowerCase()) === 0); 用来比对的值,符合条件的筛选出来

@select=“handleSelect” 当前选中的那一项 可在事件里进行操作 获取当前项的id等

  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: el-autocompleteelement-ui 中的一个自动完成组件。 使用方法: 1. 安装 element-ui 2. 在项目中引入 el-autocomplete 组件 3. 使用 v-model 指令绑定输入框的值 4. 使用 :fetch-suggestions 属性绑定获取建议列表的方法,该方法需要返回一个 Promise 对象 5. 使用 v-on:select 事件绑定点击建议项的回调函数 6. 可以使用 props 属性自定义输入框的样式、建议项的样式等 示例代码: ``` <template> <el-autocomplete v-model="inputValue" :fetch-suggestions="querySearch" @select="handleSelect" placeholder="请输入内容" > </el-autocomplete> </template> <script> export default { data() { return { inputValue: '', }; }, methods: { querySearch(queryString) { return new Promise((resolve) => { setTimeout(() => { resolve(['vue', 'javascript', 'css', 'html', 'element-ui'].filter(item => item.includes(queryString))); }, 200); }); }, handleSelect(item) { console.log(item); }, }, }; </script> ``` 详细的使用方法可以参考 element-ui 的官网说明: https://element.eleme.cn/#/zh-CN/component/autocomplete ### 回答2: el-autocompleteElement-UI中的一款自动完成组件,可用来快速搜索并选择一项或多项数据。 使用el-autocomplete前需要先在Vue组件中导入element-ui的库 ```javascript import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` el-autocomplete使用步骤如下: 1、在template中添加el-autocomplete组件 ```html <el-autocomplete v-model="value" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect"></el-autocomplete> ``` 其中v-model绑定输入框的输入值;fetch-suggestions绑定搜索方法;placeholder为占位符;select绑定选择方法。 2、在data中定义value和suggestions ```javascript data() { return { value: '', suggestions: [] }; }, ``` value为输入框输入的值,suggestions为搜索结果。 3、在methods中编写querySearch方法 ```javascript querySearch(queryString, cb) { var restaurants = ['北京烤鸭', '上海生煎', '广东粥', '重庆火锅', '四川麻辣烫']; var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants; // 调用 callback 返回建议列表的数据 cb(results); }, createFilter(queryString) { return (restaurant) => { return (restaurant.toLowerCase().indexOf(queryString.toLowerCase()) === 0); }; }, ``` 其中,queryString为输入框的输入值,cb为返回搜索结果的回调函数。将搜索结果赋值给suggestions。 createFilter为一个自定义的过滤函数,用于过滤出包含queryString的搜索结果。 4、在methods中编写handleSelect方法 ```javascript handleSelect(item) { console.log(item); }, ``` 将选中项的值打印出来。 至此,一个简单的el-autocomplete已经完成,可以搜索并选择一项数据。 还可以通过设置props来增加组件的功能: 1、设置props的multiple为true可以实现多选功能: ```html <el-autocomplete v-model="value" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect" :multiple="true"></el-autocomplete> ``` 2、设置props的prefix-icon和suffix-icon为图标可以美化输入框: ```html <el-autocomplete v-model="value" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect" :prefix-icon="searchIcon" :suffix-icon="loadingIcon"></el-autocomplete> ``` 其中,searchIcon和loadingIcon为自定义的图标。 3、设置props的debounce为节流时间,可以控制延迟搜索的时间: ```html <el-autocomplete v-model="value" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect" :debounce="500"></el-autocomplete> ``` 在这里,表明了el-autocomplete使用方法及使用该组件可以实现的一些效果,开发人员可以通过了解该组件提供的功能和方法来根据自己的实际项目需求进行修改和使用,从而为用户提供更好的交互体验。 ### 回答3: el-autocompleteElement UI框架中的一个自动补全组件。它可以接受用户输入的内容,并在一个预设的数据源中进行匹配,从而展示出匹配的结果供用户选择。在实现搜索框、标签输入、下拉选择等场景中都可以使用该组件。 el-autocomplete组件的使用步骤如下: 1.引入组件: ``` import { Autocomplete } from 'element-ui'; ``` 2.注册组件: ``` components: { Autocomplete } ``` 3.在HTML页面中使用组件: ``` <el-autocomplete v-model="value" :fetch-suggestions="querySearch" placeholder="请输入内容"></el-autocomplete> ``` 其中,v-model用于双向数据绑定,将用户实际输入的内容绑定到data中的value属性上。fetch-suggestions是重要的属性,它可以接受一个方法,该方法将返回匹配的结果。 4.在data中定义value属性及querySearch方法: ``` data() { return { value: '', data: ['Java', 'JavaScript', 'Python', 'HTML', 'CSS'] }; }, methods: { querySearch(queryString, callback) { let suggestions = []; if (queryString) { suggestions = this.data.filter(item => { return item.toLowerCase().indexOf(queryString.toLowerCase()) !== -1; }); } callback(suggestions); } } ``` 以上代码中,value属性用于保存用户实际输入的内容,data数组是用来存储预设数据源的。querySearch方法将用户输入的内容queryString与data中的每个元素进行匹配,如果匹配成功,则将匹配的元素添加到suggestions数组中,最后调用callback将匹配的结果返回。 el-autocomplete组件还提供了多种自定义的属性,比如:suggestion-template,用于自定义展示结果的模板;value-key,用于指定使用哪个字段作为结果的value值等等。这些自定义属性可以根据实际需要进行使用。 最后,需要注意的是,el-autocomplete并不能和form组件进行直接绑定,需要通过监听value的变化来实现form表单的提交。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值