element-plus下拉选择select只显示最后一个解决办法

最新推荐文章于 2024-06-12 15:44:25 发布

努力的yuan在路上

最新推荐文章于 2024-06-12 15:44:25 发布

阅读量604

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/bird__yuan/article/details/133695232

版权

在用到element-plus下拉选择select时候会遇到无论怎么选择都选中的是最后一个，这里我遇到的场景是两个下拉框联动，但是问题是一样的

这是没解决前的代码，后来经过查询资料发现是少了点东西，在el-option中把属性添全就行

:key='' :value=""

添加上经过实际测试，可以正常选择了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

努力的yuan在路上

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
element-plus下拉选择select只显示最后一个解决办法

在用到element-plus下拉选择select时候会遇到无论怎么选择都选中的是最后一个
复制链接

扫一扫

解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题

10-14

主要介绍了解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

详解element-ui设置下拉选择切换必填和非必填

12-10

在Element-UI中，开发Web应用时常会遇到需要动态调整表单验证规则的情况，比如一个下拉选择框根据用户的选择，使得某个输入框变为必填或非必填。本篇文章将详细讲解如何实现这一功能。首先，我们来看一下具体的...

参与评论您还未登录，请先登录后发表或查看评论

el-select下拉菜单最后一个显示不全的问题

JunJiu0420的博客

09-06

435

注意：需要在不含scoped的全局样式中添加。

element ui组件select下拉框无论选择哪个都变成最后一个

l1002670137的博客

02-08

2325

element ui组件select下拉框无论选择哪个都变成最后一个怎么办

el-select出现全选情况，并且无论点击哪个选项，都显示最后一个选项的问题

最新发布

m0_71385141的博客

06-12

355

原因：由于绑定的是对象类型数据，官网要求指定value-key作为唯一性标识。

element-plus下拉选择select只显示最后一个是标签问题

weixin_48194540的博客

06-06

763

element-plus下拉选择select只显示最后一个是闭合标签的问题

vue el-select绑定对象时，回显内容不正确，始终是最后一项

u010671652的专栏

10-30

7692

vue el-select绑定对象时，回显内容始终是最后一项一、问题描述使用el-select组件绑定类型为对象时，回显内容始终为选项的最后一项，但是通过控制台打印的信息却是所选项。使用代码： <template> <div class="page-index"> <el-form :model="ruleForm" :rul...

el-select下拉框最后一行选项展示不全

m0_60067558的博客

10-29

734

【ElementUI】el-selsct下拉菜单最后一项显示不全，深度选择和穿透选择均无效_ColdCoder的博客-CSDN博客有用有用！！！！！！！！！

elementui下拉选择器无论怎么选都是最后一项的问题

Ych_cxy的博客

08-19

3298

<el-select filterable v-model="scope.row.name" placeholder="请选择" style="width: 100%;"> //如果你的每一个item是一个对象,:value绑定的是一个对象,那么这样就会出现那样的问题 <el-option :key="item.id" v-for="item in list" :lab...

详解为element-ui的Select和Cascader添加弹层底部操作按钮

10-15

在Element UI中，`el-select`和`el-cascader`是两个常用的组件，用于下拉选择和级联选择。然而，它们默认并未提供在弹出层底部添加自定义操作按钮的功能。本篇文章将深入探讨如何通过自定义方法实现这个功能，以便在...

Element ui 下拉多选时新增一个选择所有的选项

12-09

本问题关注的是如何在Element UI的下拉多选框（`el-select`）中添加一个“全选”选项，使得用户能够一键选择所有可选项。以下是对这个功能实现的详细解释：首先，我们需要创建一个基础的Vue.js应用，并引入Element...

Ant Design of Vue -- 实现树形结构的只能选最下层数据及只默认展开选中的数据

elephant_my的博客

02-19

4469

Ant Design of Vue -- 实现树形结构1. 展示形式2. 代码实现2.1 样式实现2.2 只能选最下层数据2.3 默认只展开选中的数据 1. 展示形式 2. 代码实现 2.1 样式实现 <a-tree v-model="checkedKeys" checkable :tree-data="treeData" :expanded-keys="expandedKeys"@expand="onExpand" @check="onCheck" /> /** * @func：打开分配菜

VueTreeselect只能选择叶子节点（末级节点）

夏夏

11-26

3553

:disable-branch-nodes="true"

elementUI，el-select下拉选项最后一项内容高度不撑开的问题

sven_chen93的博客

02-07

3169

最近测试在点开下拉框的时候，发现下拉框最后一项展示不全的问题，我后面看了下，觉得是element的问题，如下图所示：后面发现是高度渲染少了17px，后面相加类名总是加不上，查找blog和官方文档发现可以给el-select添加类名的属性：popper-class 在这个class下把这个固定的高度加上17px即可。 <el-select popper-class="modifyStyle"> <el-option v-for="item in options" :key="ite

Vue——Element 级联选择器 v-model只取最后一级

奔跑的狮子

02-21

1522

【代码】Vue——Element 级联选择器 v-model只取最后一级。

element-ui 下拉框选择器selete多选是，单行显示所选内容

ʚ菲菲的博客ɞ

07-02

1010

element-ui 下拉框选择器selete多选是，单行显示所选内容只需重写 el-select 原生样式 .el-select__tags { flex-wrap: inherit !important; overflow-x: auto !important; } 特别注意：重写原生样式时，去掉当前 style 的 scoped 效果图; ...

解决＜el-select＞自定义option!只显示值不显示label!

TangMonk的博客

09-14

1292

应该将。

Element el-select 选择器(下拉框)详解

热门推荐

程序员大阳

08-08

8万+

本文目录1. 用途2. 数据绑定2.1 固定选项2.2 选项绑定数组3. 功能效果3.1 可清空选项3.2 多选3.3 可搜索4. 事件响应5. 小结 1. 用途 el-select即选择器，用于从若干个候选项中选择其中一个(或者多个)。在传统网页开发中，选择器经常被称作下拉框、下拉列表，是最常用的表单元素之一。 2. 数据绑定 el-select的数据可以来源于固定的若干个选项，或者通过v-for绑定一个数组。 2.1 固定选项固定选项时，选中项的value与selectedValue双向绑定。数

EementUI el-select绑定对象时，回显内容始终是最后一项

Jungleforward的博客

05-29

861

EementUI el-select绑定对象时，回显内容始终是最后一项需要加一个value-key 和“：key” 才能正确的回显 <el-form-item label="分类品牌" :label-width="formLabelWidth"> <el-select v-model="currentBrand" placeholder="请选择" value-key="id"> <

element-plus el-select 扩展使用

03-29

element-plus el-select组件是一个常用的下拉选择框组件，可以用于选择单个或多个选项。在使用el-select时，我们可以通过扩展el-select的属性和方法，来满足我们的特定需求。 1. 扩展el-select的属性我们可以通过给el-select添加自定义属性，来扩展其属性，例如： ``` <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> <span style="float: left">{{ item.label }}</span> <span style="float: right; color: #8492a6; font-size: 13px">{{ item.desc }}</span> </el-option> </el-select> ``` 在上面的代码中，我们通过给el-option添加了一个desc属性，来展示选项的描述信息。 2. 扩展el-select的方法我们可以通过在el-select的mounted钩子函数中，给它添加自定义方法，例如： ``` <el-select ref="mySelect" v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> <span style="float: left">{{ item.label }}</span> <span style="float: right; color: #8492a6; font-size: 13px">{{ item.desc }}</span> </el-option> </el-select> <script> export default { data() { return { value: '', options: [ { value: 'option1', label: '选项1', desc: '描述1' }, { value: 'option2', label: '选项2', desc: '描述2' }, { value: 'option3', label: '选项3', desc: '描述3' }, { value: 'option4', label: '选项4', desc: '描述4' } ] } }, mounted() { this.$refs.mySelect.myMethod = function() { console.log('自定义方法') } } } </script> ``` 在上面的代码中，我们在el-select的mounted钩子函数中，给它添加了一个自定义方法myMethod，然后在组件中可以直接使用this.$refs.mySelect.myMethod()来调用这个方法。总结：通过扩展el-select的属性和方法，我们可以更加灵活地使用这个组件，满足我们特定的需求。但是，在扩展时需要注意，不要破坏el-select原有的功能和属性，以免出现意外的问题。