使用el-select只能选中最后一项，且options全部是选中状态

最新推荐文章于 2024-07-14 02:37:49 发布
最新推荐文章于 2024-07-14 02:37:49 发布
阅读量3.9k 收藏 9
点赞数 6
文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39122996/article/details/121335495
版权

Vue.js value-key 唯一标识 下拉菜单 数据绑定
关键词由CSDN通过智能技术生成

 我认为这个问题的核心就是唯一性标识

最初遇到这个问题的时候，在网上找到两种解决方法：

一：value-key

根据element官网提示

 根据上图显示，value-key绑定的是下拉数组里面某一对象的键名，这个键名对应的值在各项中都不一样，保证具有唯一性，然后option里的value绑定的是一个对象，这种情况下可以实现正常select显示

二：下拉数组的每一项添加value作为唯一标识

 结果显示正常

 

 

陌紫芊宇
关注
  • 6
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
el-cascader多选级联选择器，取值为最后一级数据
dfdlife的博客
03-28 7288
el-cascader 级联选择器多选取值，如果只勾选了一级，就取一级；如果同时勾选了一级和二级，那结果只取二级；如果同时勾选了一级、二级和三级，那结果只取三级。
修复el-select 绑定值value为对象类型，选中一个所有都选中了
07-19 1707
el-select的value绑定的是对象，但是选中后，远程搜索的所有结构都是选中样式。
el-select 下拉框全选、多选的几种方式组件_el-select全选
2401_84435768的博客
07-14 1268
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
element ui组件select下拉框无论选择哪个都变成最后一个
l1002670137的博客
02-08 2356
element ui组件select下拉框无论选择哪个都变成最后一个怎么办
element-plus下拉选择select只显示最后一个解决办法
bird__yuan的博客
10-09 629
在用到element-plus下拉选择select时候会遇到无论怎么选择都选中的是最后一个
el-select出现全选情况，并且无论点击哪个选项，都显示最后一个选项的问题
m0_71385141的博客
06-12 420
原因：由于绑定的是对象类型数据，官网要求指定value-key作为唯一性标识。
EementUI el-select绑定对象时，回显内容始终是最后一项
Jungleforward的博客
05-29 873
EementUI el-select绑定对象时，回显内容始终是最后一项 需要加一个value-key 和“：key” 才能正确的回显 <el-form-item label="分类品牌" :label-width="formLabelWidth"> <el-select v-model="currentBrand" placeholder="请选择" value-key="id"> <
el-select获取选中的label值.pdf
12-16
在Vue.js框架中，Element UI库提供了一个丰富的组件集，其中`el-select`是一个常用的下拉选择组件。在处理用户交互时，有时我们需要获取选中项的`label`或`value`值。从提供的信息来看，这里介绍的是如何在不通过...
详解element-ui中el-select的默认选择项问题
10-16
在Element-UI，一个流行的Vue.js组件库中，`el-select`组件被广泛用于实现下拉选择功能。本文将深入探讨`el-select`组件在设置默认选择项时可能遇到的问题及解决方案。 首先，`el-select`是Element-UI提供的一个...
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
在使用element-ui开发Web项目时，经常会遇到一些组件使用上的细节问题，其中element-ui中的下拉多选框组件el-select使用时，如何设置默认值且不可删除，是一个较为常见的需求。本文将详细介绍如何解决这个问题，以及...
el-select数据过多懒加载的解决(loadmore)
10-16
在前端开发中，使用el-select组件来实现下拉选择功能是相当普遍的。不过，在处理大量数据时，若直接渲染所有数据项，会导致el-select组件的渲染性能下降，甚至可能导致界面卡顿。为了解决这一问题，可以通过实现懒...
el-select 自定义创建条目时，只能选择一个或者输入一个
csdnyp的博客
08-25 3966
如图所示 当选择甲方时，甲方代表只能选择一个，且不能自行输入； 当甲方代表没有人员可以选择时，可以自行输入创建一个人员 代码 <el-form-item label="甲方" prop="partyAName"> <el-select v-model="AddContractForm.partyAName" @change="customerCompanyChangeA" placeholder="请选择甲方公司" clearable>
element中el-cascader级联选择器只有最后一级可以多选
小马甲
01-14 3954
element-ui中级联选择器只有最后一级可以多选，其它级只有展开子节点的功能，如下图所示：可以观察到最后一级的li节点上没有属性，可以通过这个来隐藏非最后一级节点的来解决此问题本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。
vue el-select绑定对象时，回显内容不正确，始终是最后一项
u010671652的专栏
10-30 7762
vue el-select绑定对象时，回显内容始终是最后一项 一、问题描述 使用el-select组件绑定类型为对象时，回显内容始终为选项的最后一项，但是通过控制台打印的信息却是所选项。 使用代码： <template> <div class="page-index"> <el-form :model="ruleForm" :rul...
Element-Plus选择器默认选择最后一个选项
willluckysmile的博客
02-29 529
今天在写前端的时候碰到了一个问题， 个人用的框架是Vue3， 然后采用了Element-Plus作为组件集成， 里面使用了el-select作为下拉选框， 然后在实际过程中， 只要请求到了数据， 下拉选框默认就选择了最后一个选项， 然后设置的placeholder也未生效， 折腾了好久， 搜了一圈也没找到有同样的问题。这样就导致了出现那种奇奇怪怪的问题， 关键是它的大逻辑没有错， 你选择了对应的选项后， 它依然能顺利执行， 只是初始化的时候显示异常， 只要把空对象替换成空字符串就可以了。
Vue踩坑之 el-select下拉框多选，选择后赋值成功，输入框不显示选中的值
qq_40896145的博客
02-23 4916
问题描述： 多选下拉框，选中列表中的选项，但输入框不显示已经选中的数据并且下拉框中已选中的数据不是选中状态。 问题原因： Vue 无法监听动态新增的属性的变化。 问题解决： 方法一： 在el-select选框组件中绑定change事件，如下: changeData() { this.$nextTick(() => { this.$forceUpdate() }) } 方法二：change事件中使用$set来对属性赋值，如下: changeData(val) { this.$set(t
el-select组件如何在页面一加载时就根据数据选中el-option中的数据
Frank_colo的博客
07-13 375
页面一加载就要选中下拉中的数据，要和下拉数组中的value的类型一致，value是number,select的v-model就不能是字符串，必须是number.不然就会显示字符串。
Element Plus 的下拉选择器el-option的字体全部蓝色，全部是选中状态
LlanyW的专栏
02-23 1084
给每个item添加一个value字段，值任意,这个是在开发误写value值，发现它也能解决问题。给外层el-select增加一个value-key指定值: value-key="ID"placeholder="请输入商品名/关键字"
element-plus下拉选择select只显示最后一个是标签问题
weixin_48194540的博客
06-06 779
element-plus下拉选择select只显示最后一个是闭合标签的问题
el-select默认选中第一项
最新发布
08-10
`el-select` 是 Element UI 中的一个下拉选择组件，在Vue框架中，默认情况下，如果你没有指定其他选项的状态，它会自动选中第一个列出的选项。你可以通过设置 `value` 属性来控制默认选中的值，这个属性通常对应于你数据数组中的一个对象或者值。 例如，假设你的选项列表数据是这样的： ```javascript data() { return { options: [ { value: 'option1', label: 'Option 1' }, { value: 'option2', label: 'Option 2' }, { value: 'option3', label: 'Option 3' } ] }; } ``` 然后在模板中绑定 `options` 到 `el-select` 的 `value`: ```html <el-select v-model="options.value"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select> ``` 这里 `v-model="options.value"` 表示默认选择第一个 `options` 对象的第一个值。如果 `options` 数组为空，或者你想自定义初始选中的值，你需要相应地调整 `v-model` 的绑定值。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值