vue iview实现Select远程搜索为选择匹配值失去焦点不清空输入值（项目记录）

最新推荐文章于 2024-03-21 04:23:19 发布
最新推荐文章于 2024-03-21 04:23:19 发布
阅读量2.7k 收藏 1
点赞数 1
分类专栏： vue 文章标签： css vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39139322/article/details/107634100
版权

刚开始的思路是使用v-model进行双向数据绑定，结果发现这样做之后无法删除输入值。。

详细查看了iview api后看到了allow-create属性，输入的时候创建新匹配项再用css将之隐藏，理论上就可以了吧。

以下就是实践代码，幸运的是可以满足需求

css部门：

万古长空如长夜
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iview select多选远程搜索，不清空关键字
renamayu的专栏
04-13 1154
<template> <Row> <Col span="12"> <Select ref="selectName" v-model="model14" multiple filterable remote :remote-method="remoteMethod2" :loading="loading2" @on-change="onChange" @on-query-change="handleSelectChange"> <O.
iview踩坑笔记
总想试试，万一成了呢？？
03-30 199
1、表单验证不通过问题 输入框中有值,但表单仍显示不通过 解决方案： 1、Form标签中是否为:model,不是则改为:model 2、FormItem标签中prop的值必须与v-model一致 如v-model='form.test'，那么prop='test' 3、Form标签中必须添加ref ...
iview-form 可输入下拉框
qq_43780814的博客
11-15 1053
{ title: "登录地址：", type: "select", key: "login_url", rule: { required: true, message: "请输入登录地址", trigger: "blur" }, props: { maxlength: 255, placeholder: "请输入登录地址", filterable: true, //和'allow-create': true;同时存在 'allow-create': tr.
iview踩坑记录（使用iview组件你不得不看的坑点和妙用指南！
最新发布
2401_83621541的博客
03-21 817
推荐一些系统学习的途径和方法。每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】HTML 和 CSS：每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。
php 失去焦点隐藏,iview中input框失去焦点控制显示隐藏
weixin_39590635的博客
03-24 117
写了一个指令Vue.directive('clickoutside',{// 初始化指令bind (el, binding, vnode) {function documentHandler (e) {// 这里判断点击的元素是否是本身，是本身，则返回if (el.contains(e.target)) {return false}// 判断指令中是否绑定了函数if (binding.expres...
vue 输入框失焦时做本地存储
初郁
11-10 1057
<van-field v-model="phone" name="phone" type="digit" maxlength="13" input-align="right" placeholder="请输入11位数字" label="手机号" @blur="setLocalStorage" /> created () { let data = window.localStorage.getItem('financialData') if (data) {
Vue + ElementUI 开发项目，遇到下拉框option 失去焦点时 不关闭的问题
weixin_43968963的博客
04-27 3776
问题描述： 使用Vue + ElementUI 框架开发项目且用了下拉加载更多，遇到了下拉框（el-select）中的option（el-option）失去焦点后，下拉框不隐藏，并在控制台报错**Uncaught TypeError: Cannot read properties of null (reading ‘disabled’) **，截图如下： 控制台报错： 不关闭的下拉选择框： 百度参考了其他文章之后得到的结果是使用了 el-dropdown 下缺少 el-dropdown-menu 元素
iview select 怎么清空_iView之清空选择框
weixin_39779528的博客
12-22 1268
Form表单布局的vue组件，已经增加了校验选择框，判断为空的情况下不调用接口。后来发现，选择了选择框后，清空，再点查询，还是会调接口，看日志发现传了原来清空的值过来，实际上没有清空。这里增加on-clear 事件绑定清空值。1 2 :filterable="true">3 4 ...
解决vue 更改计算属性后select选中值不更改的问题
08-27
下面小编就为大家分享一篇解决vue 更改计算属性后select选中值不更改的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue 实现动态循环出的多个select 不能重复选择相同的数据
01-20
Vue 实现动态循环出的多个select 不能重复选择相同的数据前言效果图演示实现逻辑代码总结 前言 1.本篇文章功能的实现是基于vue的计算属性computed 2.个人感觉vue的计算属性computed挺适合做这个功能的，因为通过计算...
inputAuto.vue 基于vue+iview的搜索下拉选择组件
04-02
iview中的select和AutoComplete不能满足我的需求，故自己写。
iview中Select 选择器多选校验方法
01-19
iview提供的select组件中使用multiple属性可以开启多选模式,返回的数据也是数组的形式。 iview使用的校验是根据async-validator来实现数据验证。...以上这篇iview中Select 选择器多选校验方法就是小编分享给大家的
Vue Element 分组+多选+可搜索Select选择器实现示例
12-04
实际就是将element三种官方select实例整合起来，同时实现分组+多选+可搜索，此外点击一级分组名可以实现全选/全不选。供有相关需求的开发者参考 准备工作： 除了vue脚手架、element等必要包之外。该项目还用到了...
解决：el-select可输入时失焦会失去输入框中值
个人博客
04-26 2983
default-first-option，在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用。allow-create，是否允许用户创建新条目，需配合 filterable 使用。
iview select清空选择,iview中select组件使用总结
weixin_32891615的博客
03-19 1127
1.使用iview的select组件进行远程搜索远程搜索需同时设置filterable、remote、remote-method、loading四个 props，其中 loading 用于控制是否正在搜索中，remote-method 是远程搜索的方法。注意：需要给 Option 设置 key。设置初始显示值，需设置label属性。页面代码：{{item.userName}}参数值：exp...
iview 下拉select样式_完成iview的下拉select既可以编辑内容又可以选择下拉选项的功能（借助iview的自动完成组件）...
weixin_39621774的博客
12-21 808
最近在使用iview重构老项目页面代码的时候，发现老项目有部分下拉框既可以编辑又可以选择下拉框自带的内容，找了找iview的select组件，发现并没有一个类似的功能。最接近我的需求的，可能是设置select的filterable属性开启搜索模式，但是每次输入新的内容，鼠标一离开不是被清空，就是选中之前选择的一项，故放弃。后来又看到iview4.0的版本加了一个allow-create属性，拿给老...
iview Select可创建条目选择器的坑
程序员柱子的博客
12-08 1373
在使用iview 的Select选择器可创建条目（[官网链接：]时格式化代码后发现显示的值前后有空格(https://www.iviewui.com/components/select#CJTM)） 这样是可以运行的 Eslint格式化代码后 <Row> <Col span="12" style="padding-right:10px"> <Select v-model="model17" f
【Element】el-select下拉选择器搜索选项，自定义搜索方法，结合后端接口远程搜索
热门推荐
coderYYY的博客
03-20 2万+
el-select下拉选择器搜索选项，自定义搜索方法，结合后端接口远程搜索
vue+elementui select选择器远程搜索
qq_42923368的博客
03-17 4197
官方的格式 <template> <el-select v-model="value" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading"&...
Ant Design Vue 实现 ＜a-select＞ 选择器远程搜索可选择又可输入字符
06-03
Ant Design Vue 的 `<a-select>` 组件支持远程搜索和可输入字符的功能，可以通过设置其 `filter-option` 属性来实现。具体实现步骤如下： 1. 设置 `<a-select>` 的 `filter-option` 为自定义函数，该函数接收两个参数：输入的搜索关键词和选项对象，返回一个布尔值表示该选项是否符合搜索条件。 ```html <a-select v-model="value" :filter-option="filterOption" :remote="true" :allow-clear="true" :show-search="true" :default-active-first-option="false" :loading="loading" :placeholder="'请输入搜索关键词'" > <a-select-option v-for="item in options" :key="item.value" :value="item.value" >{{ item.label }}</a-select-option> </a-select> ``` ```javascript data() { return { value: '', options: [], loading: false, } }, methods: { filterOption(input, option) { return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 }, async searchOptions(value) { this.loading = true // 调用远程接口获取选项列表 this.options = await someApi.getOptions(value) this.loading = false }, }, watch: { value(newValue) { if (newValue) { this.searchOptions(newValue) } else { this.options = [] } }, } ``` 2. 设置 `<a-select>` 的 `remote` 属性为 `true`，表示开启远程搜索功能。 3. 设置 `<a-select>` 的 `allow-clear` 属性为 `true`，表示允许清空已选择的选项。 4. 设置 `<a-select>` 的 `show-search` 属性为 `true`，表示显示搜索框。 5. 设置 `<a-select>` 的 `default-active-first-option` 属性为 `false`，表示不默认选中第一项选项。 6. 设置 `<a-select>` 的 `loading` 属性为 `true`，表示正在加载选项列表。 7. 设置 `<a-select>` 的 `placeholder` 属性为提示用户输入搜索关键词的占位符。 8. 在组件的 `methods` 中定义 `filterOption` 方法，该方法根据输入的搜索关键词和选项对象判断该选项是否符合搜索条件。 9. 在组件的 `methods` 中定义 `searchOptions` 方法，该方法调用远程接口获取选项列表，并将结果保存到组件的 `options` 属性中。 10. 在组件的 `watch` 中监听 `value` 的变化，当 `value` 不为空时调用 `searchOptions` 方法获取选项列表，否则清空选项列表。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值