记录使用element组件el-select出现的坑

最新推荐文章于 2024-02-04 17:50:19 发布
最新推荐文章于 2024-02-04 17:50:19 发布
阅读量1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57011137/article/details/116987506
版权

在使用el-select这个组件的时候，有的时候我们在渲染上自己的数据后，点击某一条数据之后，对应的input框也会显示我们选中的属性，但写的时候必须定义data该开始写的时候，为了省略，没有带value属性及

在这里插入图片描述

这个value，所以如果不带这个value的话我们选中后，对应的input框不会显示我们选中的内容

out-of-reach
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用elementUI el-select时踩的一个小坑
weixin_42520314的博客
07-18 1669
卤煮使用vue-elementUI时使用el-select,从后台读取数据渲染el-option的value和lable,当卤煮编辑页面是需要从后台取到传给后台的value值，然后卤煮想让el-option显示的是lable值。 <el-select class="height40" v-model....
el-select-tree:ElementUI的el-select与el-tree结合
05-07
import 'el-select-tree/lib/element-ui' ; 全球注册 import Vue from 'vue' ; import ElSelectTree from 'el-select-tree' ; Vue . use ( ElSelectTree ) ; 组件内注册 import ElSelectTree from 'el-select-tree'...
vue-element 动态给select下拉框赋值却不匹配的问题
Mr_ZhouR的博客
10-14 3047
做项目的时候，改前人bug，遇到了个下拉框赋值问题，处理完记录一下 下拉框赋值方式 <el-form-item label="请选择税率" prop="rate"> <el-select v-model="selectedRate" placeholder="请选择税率" @change="handleChangeRate" class="input-text"> <el-option v-for="dict in rateDict" .
前端select选择框回显数据不匹配
最新发布
weixin_52682014的博客
02-04 909
在使用element的select选择框进行数据回显时，显示的数据与label值不一致该怎么解决
Element UI 之 el-select组件常见踩坑分享
weixin_45325250的博客
04-26 5656
一、 单选时绑定的值数据类型为boolean / string / number，多选时绑定的值数据类型为Array 二、 当Select选择器可搜索时，Select 会找出所有label属性包含输入值的选项；label属性如果没有绑定 相应的值的话，搜索功能是不生效的。 三、如果option的选项内容显示正常，但是选中后输入框里显示的还是value的值，没有显示lable的值，检查label属...
修改element ui select组件样式遇到的坑
yurisa1994的博客
08-18 956
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
使用element-ui的select选择器（一个页面多个的时候）出现的问题
qq_42227041的博客
08-23 1万+
在使用select选择器的时候，因为里面内容是使用v-for循环出来的，选择依赖的值都是value，虽然在不同的数组中，但是如果value相同，两个选择器绑定的v-model里面输出的值也是相同的 所以在这里 需要value值不同，需要重新配置选择，使用一个新的函数来重新配置 //选择状态配置 selectconfig(){ var reviewed ='-1',...
关于Element UI中select组件中遇到的问题
weixin_34081595的博客
07-11 821
问题一：在使用select组件设置多选功能后，窗口抖动问题？ 详细描述：在我使用select做多选的功能时出现了窗口抖动的问题，测试的时候发现，在有些人的电脑上抖动，有些人的电脑上不抖，找了很多文档，后来在element UI中GitHub的issue中找到问题描述。 解决办法：GitHub上给出的办法亲测没有用，然后发现实际上是电脑的页面被缩放了，在我遇到的问题里是电脑缩放到了90%，把电脑...
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
Element-UI的`el-select`组件是用于创建下拉选择框的，它提供了丰富的功能，包括远程搜索（remote search）。远程搜索在大型数据集或动态获取数据的情况下非常有用，因为它只在用户输入时向服务器请求数据，提高了...
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
详解element-ui中el-select的默认选择项问题
10-16
在Element-UI，一个流行的Vue.js组件库中，`el-select`组件被广泛用于实现下拉选择功能。本文将深入探讨`el-select`组件在设置默认选择项时可能遇到的问题及解决方案。 首先，`el-select`是Element-UI提供的一个...
element组件el-select框
qq_43840793的博客
06-16 573
el-select样式及下拉框样式
解决element ui select下拉框不回显数据问题
wangyuanjun008的博客
01-24 3万+
最近在做一个项目,项目的后端是地址: https://github.com/wangyuanjun008/wyj-springboot-security.git 前端地址是 https://github.com/wangyuanjun008/wyj-vue-security.git ,使用的前端语言是vue,使用webpack构建vue-cli全家桶 在项目中用到 el-select 时遇到一
element-ui关于el-select的下拉框选项中出现“无匹配数据”问题分析及解决办法
dongkaiyong的博客
10-01 3万+
最近的项目前端用到vue+elementui框架，在使用过程中遇到很多问题，在后几篇文章中会一一列出，有解决的，有没解决的。 先说关于select下拉框的问题：（项目原因无法截图） 具体现象是在某个下拉框下面会在显示完所有的下拉选项后出现一个额外的下拉框，里面显示“无匹配数据”。 先说一下问题原因：在你选中一个下拉选项后，由于功能需要更新了下拉框的option对应的值，并且你的select的v...
el-select下拉框没有数据
qq_45327886的博客
03-21 1万+
el-select给options赋值后,下拉框无数据
Element-UI中Select选择器讲解（el-select详解）
热门推荐
辰兮要努力
11-22 9万+
本篇整理了el-select相关组件的基础用法，也正是这个组件，让我更加喜欢vue，更加喜欢element-ui，欢迎阅读学习，分享获取新知，大家一起进步。
el-select显示，当选择框的选项无法与选择框的value值匹配时，不想显示value值的处理办法
qq_42185724的博客
01-22 5764
写在前面，当出现这种情况的时候，选择框option肯定是从接口获取的。 举例一个表单回显时的情况，当点击编辑按钮，表单打开。由于没有想匹配的选项，选择框自然显示了所获取的value值。那么我们处理这个情况的代码就得放在这个地方，写在点击编辑按钮的方法中。下面我先贴出代码再稍微讲下逻辑。 this.addForm = { ...row }; let i = true; //声明一个变量，用做判断 //解决存储介质数组无对应匹配选问题，匹配不成功选择框显示为空
el-select 输入下拉搜索，匹配不到数据时也保留输入值，同时input获取焦点时保留其value值(el-select支持手动输入搜索)
有问题可关注公众号：前端研究院 后台输入问题回复
04-26 7118
需要注意的地方 1.为了在匹配不到数据时也保留其输入的值，可以用 filter-method 自定义筛选 2. el-select添加上filterable之后，点击展开，点击收起，会导致focus和blur事件不触发，但点击页面其他地方才可正常触发 ，可利用visible-change 事件来解决些问题 3.input获取焦点时保留其value值用focus事件做相关赋值处理 具体实现代码如下 <template> <el-select id="selectInput..
vue2.0 element-ui中的el-select选择器无法显示选中的内容
weixin_30721077的博客
04-23 2674
我使用的是element-ui V2.2.3。代码如下，当我选择值得时候，el-select选择器无法显示选中的内容，但是能触发change方法，并且能输出选择的值。 select.vue文件 <template> <div> <div class="row" v-for="RowItem in rows"> &...
Element组件el-select，在选择全部后无法选择其他选项，分析原因
07-14
对于Element UI的el-select组件，在选择"全部"选项后，无法再选择其他选项的原因可能是由于以下几种情况： 1. 使用了"全部"选项的特殊值：在el-select组件中，可以通过给"全部"选项设置特殊的值来表示选择全部。如果你设置了这个特殊值，并且在选择了"全部"后禁用了其他选项，那么就无法再选择其他选项了。你需要检查代码，确保在选择了"全部"后，取消禁用其他选项。 2. 使用了v-model指令：如果你在el-select组件中使用了v-model指令来绑定选中的值，那么在选择了"全部"后，v-model会将其值自动更新为"全部"选项的值，并且会触发change事件。如果你的代码中监听了change事件，在事件处理函数中禁用了其他选项，那么就无法再选择其他选项了。你需要检查代码，确保在选择了"全部"后，不会禁用其他选项。 3. 自定义的change事件处理函数：如果你在el-select组件上自定义了change事件处理函数，并在函数内部禁用了其他选项，那么也会导致无法再选择其他选项。你需要检查自定义的change事件处理函数，确保没有禁用其他选项的逻辑。 总之，你需要仔细检查代码，查找导致无法选择其他选项的具体原因，并进行相应的修正。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值