elementui 中下拉选（el-select）的options为对象时，遇到的坑

已于 2023-07-13 14:24:10 修改
阅读量732 收藏 1
点赞数 1
文章标签： elementui 前端 javascript
于 2023-07-13 14:21:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52373373/article/details/131701161
版权

当el-option 得options属性为对象时（通常咱们绑定的是数组），此时再给value赋值初始值的时候，会出现bug，如图

 效果

 原因：

 解决办法

           第一种：

        第二种

前端婴幼儿
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
11-20
这是一个项目中常见的需求，el-select 为下拉多选，默认值不可删除，或者指定值不可删除。 实现效果： el-select 如下源码中 tag closable 属性为 el-select 的 disabled 属性，所有明显不支持。 解决思路（从el-...
Element UI 之 el-select组件常见踩坑分享
weixin_45325250的博客
04-26 5661
一、 单选时绑定的值数据类型为boolean / string / number，多选时绑定的值数据类型为Array 二、 当Select选择器可搜索时，Select 会找出所有label属性包含输入值的选项；label属性如果没有绑定 相应的值的话，搜索功能是不生效的。 三、如果option的选项内容显示正常，但是选中后输入框里显示的还是value的值，没有显示lable的值，检查label属...
element ui踩坑日记之select组件
qq_31283287的博客
10-21 574
select组件的坑 问题描述： 从后台拿到的selectValue的值，显示的是0、1。并非预期的“是”、“否”。 原因： selectValue是Number类型，而绑定在select组件上的selectData.value是String类型，导致组件匹配不到相应的selectData.label，只能显示selectValue的值。 解决： select组件绑定的value值改成select...
elementUI中el-select组件踩坑
最新发布
m0_66871209的博客
06-28 182
前些天接手了一个后台管理老项目，项目中涉及到很多查询数据的业务，其中有一个需求是当用户填写完表单点击查询后将本次的查询条件作本地存储，当页面刷新时将上一次所填写的表单内容回显到表单中。
vue+element：el-select和el-option组件和v-for语法，实现下拉列表的数据填充，并且点击下拉列表数据后，另一个表单数据的自动填充
baidu_39557593的博客
04-13 1万+
1.第一个下拉列表，效果展示 2.第二个下拉列表，效果展示 3.先点击第一个下拉列表，然后第二个下拉列表自动填充，效果展示 4.js请求，后端接口，需要传递的数据格式，对象数组——appointmentUnitRecord_options1： [ {"label": "培训教室","value": "教学"}, {"label": "考试大厅", "value": "考试" }, {"label": "共享自习室", "value": "培训" }, {"lab...
el-select,el-option下拉选择框
qq_59076775的博客
07-04 7069
下拉菜单的使用
Element el-select遇到的坑
qqnbsp的博客
05-08 134
el-select muliti v-model设置的时候有问题，要么选不中，要么取消不了，感觉很诡异。vue为了效率复用的结果。所以给每一个el-select加一个不同的key变量。发现value字符串，v-model设置的变量值是数值。所以江v-model赋值的变量转为字符串即可正常显示。一直显示value，不显示label的值。
详解element-ui中el-select的默认选择项问题
10-16
本文将深入探讨`el-select`组件在设置默认选择项时可能遇到的问题及解决方案。 首先，`el-select`是Element-UI提供的一个用于创建下拉选择列表的组件。它通常与`el-option`组件配合使用，`el-option`用于定义可选的...
Vue中el-form标签中的自定义el-select下拉框标签功能
10-15
`el-select` 是`el-form` 中常用的组件，用于创建下拉选择框，用户可以在预设的选项中进行选择。在某些场景下，我们可能需要自定义`el-select` 的下拉框标签，以满足特定的需求。本文将详细介绍如何在`el-form` 中...
el-select获取选中的label值.pdf
12-16
在Vue.js框架中，Element UI库提供了一个丰富的组件集，其中`el-select`是一个常用的下拉选择组件。在处理用户交互时，有时我们需要获取选中项的`label`或`value`值。从提供的信息来看，这里介绍的是如何在不通过...
Vue: 多个el-select不能重复选择相同属性
02-22
当我们在项目中遇到“多个el-select不能重复选择相同属性”的问题时，这意味着我们可能需要实现一种机制来确保不同select组件之间的选项值不发生冲突，即用户不能在多个select中选择相同的值。以下是对这个问题的...
vue elementUI select下拉框设置默认值（赋值）失败
weixin_51747462的博客
04-04 3352
vue elementUI select下拉框设置默认值（赋值）失败
element中el-option控件的value选项绑定对象以及自定义option
热门推荐
weixin_44092905的博客
01-26 1万+
一.绑定对象 有时候选中el-option中某一个选项的时候，不仅要获取到这个item的item_id，还需要使用到item中保存的其他数据，这个时候就需要，将value绑定的值设置为整个item <el-select v-model="value" value-key="item_id" placeholder="请选择"> <el-option v-for="item in options" :key="item.value"
Element UI下拉列表el-option中的key、value、label含义
CLAY_Z的博客
05-11 7227
相当于身份令牌，唯一的令牌，防止出错。这个key没有也行，但是保险起见最好加上。因为这个key作为 value 唯一标识的键名，绑定值为对象类型时必填。这是给用户看的，当点击下拉菜单时，会出来选项，用户看到的选项就是这个这是你点击某个label(option)之后，将对应的值给v-model绑定的值model。
解决 Element-ui中 选择器（Select）因options 数据量大导致渲染慢、页面卡顿的问题
明天也要努力的博客
12-30 1万+
业务场景：服务端返回两万多条数据需要在下拉框中展示,直接渲染会导致页面卡顿且需要很长时间等待,用户体验极差,所以我们把这个优化一下el-select,直接上代码。 相关知识传送门：Vue 2.x实现自定义指令 <template> <div class="content"> <el-select v-model="chooseValue" filterable v-el-select-loadmore="loadMore(rangeNumber)">
el-option的:value绑定整个对象
weixin_51780751的博客
11-16 1889
这两张图说明：el-option的value是可以绑定对象的，但是要加value-key这个属性。
el-select组件的options条数过多时的解决方案
前端挖掘机
06-11 5605
业务场景 当使用el-select组件时，如果options数量过多，会存在的弊端： 页面渲染出大量el-option节点，会导致页面卡顿甚至卡死，用户体验极差。 选择时条目众多，查找困难。 本次我遇到的场景是options数量为6-9千的情况。 解决思路 从总options中取出固定条目的小option（renderOption）用于页面渲染，利用el-select提供的 filter-method方法进行搜索过滤，在搜索时用过滤结果更新renderOption。 代码实现 下面是vue的组件封
element 下拉选择 默认第一个
m0_53591810的博客
03-31 1836
第二：再created里面进行调用。第一：准备dom结构。
el-select options选项的显示和隐藏
m0_50666077的博客
06-21 4565
标签，通过CSS控制显示与隐藏就可以了。
怎么在elementui el-select选择器中嵌套一个el-tab
07-09
在 Element UI 的 el-select 选择器中嵌套一个 el-tab，你可以按照以下步骤进行操作： 1. 首先，确保你已经正确引入了 Element UI 的库和样式。 2. 创建一个 el-select 组件，并设置好相应的选项和绑定的数据。 3. 在 el-select 的下拉选项中，使用自定义模板（slot）来嵌套 el-tab 组件。 ```html <el-select v-model="selectedValue"> <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"> <template slot="default"> <el-tabs v-model="selectedTab"> <el-tab-pane label="Tab 1" name="tab1"> <!-- Tab 1 内容 --> </el-tab-pane> <el-tab-pane label="Tab 2" name="tab2"> <!-- Tab 2 内容 --> </el-tab-pane> </el-tabs> </template> </el-option> </el-select> ``` 4. 在 Vue 实例中，设置好相关的数据和选项数组。 ```javascript data() { return { selectedValue: '', // 绑定的选中值 selectedTab: 'tab1', // 绑定的选中标签页 options: [ // el-select 的选项数组 { label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' }, // ... ] } } ``` 注意：这只是一个简单的示例，你可以根据自己的需求进行修改和扩展。确保你已经正确引入了 Element UI 的库和样式，并适配了你的项目结构。 希望能对你有所帮助！如果还有其他问题，请继续提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值