iview中select过滤模式选中内容与显示内容不符合

最新推荐文章于 2025-06-10 14:54:33 发布
转载 最新推荐文章于 2025-06-10 14:54:33 发布 · 6k 阅读 · 0

本文探讨了在Vue.js框架中使用v-for指令时如何正确设置key属性来避免元素重复导致的异常问题，并提供了解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

那是因为<Option v-for="option(item,index)  in items" key="index"中的key的问题导致的


key根据键值对定位元素，如果index索引只代表一个元素就不会出现重复，否则就出异常。



解决办法key="index"替换成 key="只代表唯一含义的属性"


链接：https://www.cnblogs.com/cheemon/p/7199656.html

iview Select 组件 过滤功能 多项条件过滤
shenmeyaonie的博客
08-24 665
<Select v-model="formValidate.val" filterable clearable multiple placeholder="请输入" > <Option v-for="item in uData" :key="item.e...
Vue 多个select 不能重复选择相同value的数据
疑问 搜索 动手 解决 记录
04-30 6087
开发过程经常会碰到多个Select同样的选项,选择后其他select不能继续选择,整合了两种类别的需求呈现方式 第一种，不能重复选择相同value的数据，选择后其他select移出该项 前言 1.功能的实现是基于vue的计算属性computed 2.个人感觉vue的计算属性computed挺适合做这个功能的，因为通过计算属性return的值可以保证相对独立，又可以在其依赖的属性的值发生变化时进行重新计算。 3.是偶然间想到用计算属性来完成这个功能，怕自己忘了所以写在博客这里当总结，同时也希望笔者的想法能给大
iView Table自定义过滤规则动态更改表格中得数据，比如时间、数量
weixin_43550660的博客
03-30 1192
iView Table自定义过滤 表格中得数据，比如时间、数量 有个数据展示页面，后端只返回最原始数据，其余的都是我个前端仔进行换算，比如利润、利润率、占比啥的，但这不算什么，连时间、数量、等过滤条件都是前端来处理，刚接到这个需求，心里就在想，这些过滤不都是前端带参数去后端查询么，然后就去问后端，后端说就你前端处理把，因为你处理和我后端处理是一样得，我当时就纳闷了，（我脑海中马上闪现我那快忘光得 ...
iview 中 select 值不对
weixin_30648587的博客
07-18 105
blackListTypeData: [{ value: 1, text: 'AD白名单' }, { value: 0, text: '公司指定' }], urlWhiteListTypeData: [{ value: 0, text: '短期' }, { value: 1, text: '长期' }], key值不唯一，导致出现 ...
ivew怎么实现table的多选框选择根据条件禁用.全选也只能选中没有被禁用状态的行
肖肖肖丽珠的博客
06-10 589
value: row._checked, // 绑定选中状态（需自行维护）: item.ordersClassCode == 1 // 动态禁用。// 拦截事件：只有非禁用的行才能触发选中。// 更新行的 _checked 状态（可选）// 处理全选/反选（需过滤禁用行）//获取tableData的数据。// 手动控制行选中状态。
iview下拉框select添加filterable造成的bug
OldStreet61的博客
03-22 3599
在使用select下拉框的过程中，需要进行查询，因此添加了filterable属性，但是造成bug，导致第二次选择只有上次选中的结果，解决方案如下： 1、在Select中添加ref="dataSet"属性。 <Select v-model="bindData" class="selectCss" ref="dataSet" filterable> &...
vue 中的通过搜索框进行数据过滤的过程
weixin_33860722的博客
03-19 1520
1 <template> 2 <div> 3 <input type="text" v-model="searchId" placeholder="搜索"> 4 <table class="tab"> 5 <tr> 6 <th>序号</th> ...
vue项目中如何给iview的Menu菜单添加模糊搜索框
最新发布
08-05
当输入内容时，对菜单的数据进行过滤，只显示包含搜索字符串（不区分大小写）的菜单项。 3. 注意：由于菜单可能有嵌套（子菜单），我们需要递归地检查每个菜单项及其子项。如果一个父菜单的子项中有匹配项，那么该...
在iview中vue2项目中，后端给了前端下拉菜单id等信息，然后前端如何通id等信息，来渲染出下拉菜单
08-02
在iView中，Dropdown和Select组件有什么区别？在 Vue2 项目中使用 iView 根据后端返回的数据动态渲染下拉菜单，可以通过以下步骤实现： ### 实现步骤（使用模板语法） 1. **定义数据状态** ```javascript export ...
Vue 实现动态循环出的多个select 不能重复选择相同的数据
JIA_FU_FU的博客
03-18 6940
Vue 实现动态循环出的多个select 不能重复选择相同的数据前言效果图演示实现逻辑代码总结 前言 1.本篇文章功能的实现是基于vue的计算属性computed 2.个人感觉vue的计算属性computed挺适合做这个功能的，因为通过计算属性return的值可以保证相对独立，又可以在其依赖的属性的值发生变化时进行重新计算。 3.是偶然间想到用计算属性来完成这个功能，怕自己忘了所以写在博客这里当总...
vue下拉选组件i-select无法选取全部，无法赋值为空串''的诡异bug
qq_41899174的博客
09-29 5290
       这是一个让人头皮发麻，全身慎得慌的诡异bug，因为它不符合科学逻辑，违反常理。仿佛有一只黑手在恶意操控着，让前端工程师们觉得不可以思议，也无可奈何。        我们在做前端开发时， 对于下拉选一般都会有一个“全部”选项，value=''，用于清空前面选择的值，这是在正常不过了，但这在vue就开始变得奇奇怪怪，逻辑狗屁不通。       下面我开始对这个诡异的bug进行解刨，分...
搜索功能select下拉框实现自动匹配
08-17
带搜索功能的select下拉框，类似百度google的搜索框，自己匹配，很好用
iview·select动态渲染后显示内容与选中不一致
weixin_34037977的博客
07-24 1653
问题 iview·select动态渲染后显示内容与选中不一致 <Option v-for="option(item,index) in items" key="index">123</Option> 复制代码在iview中，key根据键值对定位元素，如果需要动态渲染option选项，且在不同操作下需要动态切换，必须保证每个option的key属性唯一，即，当有两...
动态添加SELECT标签中的元素，数据项与option数据源不一致
chris_sen的博客
05-18 2469
案例描述：修改列表中的某一项数据，其中一列是下拉选项，下拉选项中的数据源areaList是系统配置的，但是数据中有些迁移数据，该列中的值不在数据源范围内。修改时，该下拉选项显示正确的信息，并可以修改。 修改时界面赋值代码如下： function setEditValue(......,city_area) { ...... if(city_area =="xxx"){
antdesign搜索选择框select,需求：展示与真正取值不一致时的处理
weixin_45798022的博客
07-18 2317
antdesign搜索选择框select,需求：展示与真正取值不一致时的处理
动态给option设置selected后，select下拉框显示不正确，selected=“selected”的option
qq_40595166的博客
11-30 7234
如上图，设置了selected的option对应值为ef，但是下拉框值是cccccc。//错误代码， $("#selectId option").removeAttr("select"); $("#selectId option[value='01']").attr("selected",true); //正确代码 $("#selectId option").porp('selected',
iview select选中值取值_iview里select组件搜索后选中的数据和展示内容不一样
weixin_39831902的博客
12-20 511
iOS 底层框架的浅析1.简介 IOS是由苹果公司为iPhone.iPod touch和iPad等设备开发的操作系统. 2.知识点 iPhone OS(现在叫iOS)是iPhone, iPod touch 和 iPad 设 ...HDU 2861 四维dp打表Patti and Terri run a bar in which there are 15 stools. One day, Darre...
关于iview表单验证select标签在使用v-for的时候验证一直不通过的问题
Autism、陌亡
11-13 9718
困扰了我几天的问题，iview进行表单验证select标签时候验证失败的问题
vue的iview框架select组件远程搜索，选中后不刷新的问题
u011558902的专栏
07-31 7595
UI框架采用了iview，用的select组件的自动补全功能，也就是select组件的远程搜索功能 问题描述：第一次输入查询关键字，匹配到一条数据，选中后，再次输入查询关键字，如果和上次匹配到的条数length相同，选中时候结果发现匹配到的结果还是上一条的，并没有刷新。 解决过程：很是郁闷。断断续续弄了一周，猜想各种可能性，还在项目里的node_modules文件夹iview的源码里写cons...
iview分组select怎么让选中的组名也显示在框里头
03-20
您可以使用iview的Select组件的slot属性来实现这一功能。具体来说，您可以在Select组件中添加一个名为selected的slot，然后在该slot中使用template语法来显示选中的组名。以下是示例代码： <template slot="selected"> {{ selectedGroup }} </template> 其中，selectedGroup是一个data属性，用于存储当前选中的组名。您可以在Select组件的change事件中更新该属性的值，如下所示： <Select v-model="selected" @change="handleChange"> <Option-group v-for="group in groups" :label="group.label" :key="group.label"> <Option v-for="option in group.options" :value="option.value" :key="option.value"> {{ option.label }} </Option> </Option-group> </Select> ... data() { return { selected: '', selectedGroup: '' } }, methods: { handleChange(value) { const group = this.groups.find(group => group.options.some(option => option.value === value)) this.selectedGroup = group ? group.label : '' } } 在上述代码中，handleChange方法会根据当前选中的值来查找对应的组名，并将其存储在selectedGroup属性中。然后，在selected slot中使用该属性来显示选中的组名。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值