【andv】a-select 多条数据重复（搜索无效）的问题:

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量555 收藏
点赞数
分类专栏： Vue框架 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53791978/article/details/132788750
版权

文章目录

一、问题:

1.下拉搜索没有效果，点击选项也是不生效的
2.[Vue warn]: Error in nextTick: "TypeError: Cannot read properties of undefined (reading ‘key’)
3.[Vue warn]: Duplicate keys detected: ‘xxx’. This may cause an update error.
在这里插入图片描述

二、分析:

在这里插入图片描述

三、解决:
【1】key值用index,value用某个属性+index 也可以用随机数啥的代替，反正保证数据不一致就行了 ；

在这里插入图片描述

【2】注意：value值加了一些东西，那么在取数据的时候要记得去掉，不然取到的就不单纯的是需要的内容了

在这里插入图片描述

【3】效果：

在这里插入图片描述

Sun Peng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
解决v-for中使用v-if或者v-bind:class失效的问题
10-17
今天小编就为大家分享一篇解决v-for中使用v-if或者v-bind:class失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
antd 下拉组件框Select 选择器报错：Invalid prop: custom validator check failed for prop “value“
weixin_42665017的博客
12-16 1438
antd 下拉组件框Select 选择器报错：Invalid prop: custom validator check failed for prop "value"，解决方法：value值允许输入的值类型
ant design tree 二次点开，展开图标消失问题解决
qq_43613029的博客
08-27 947
解决方法，再次更新组件 <a-tree :key="treeKey" :load-data="onLoadData" :tree-data="treeData" @select="treeSelect" :defaultSelectedKeys="defaultSelectedKeys" :defaultExpandedKeys="defaultExpandedKeys"
a-select获取数据后，值不显示
weixin_45632887的博客
08-18 1931
a-select显示异常
antd——a-tree-select 树形选择控件 与 a-cascader 级联选择器 的对比——技能提升
yehaocheng520的博客
11-25 4321
antd——a-tree-select 树形选择控件 与 a-cascader 级联选择器 的对比——技能提升
antd-vue中的下拉选择框搜索失效的问题
Yan9_9的博客
10-21 2959
Hi,最近在开发中(vue3+TS)遇到了antd-vue中的下拉选择框，案例说看官方文档就能实现的，但是这个选择框自带了搜索功能，最后搜索功能失效。
Ant-design-vue a-select 下拉滚动的时候出现数据重复
执行上下文的博客
06-08 696
1、问题描述 在滚动下拉列表的时候 数据由正常逐渐变成全部一样的。所以想是不是key值重复了。检查了接口返回的数据后，发现value值有重复的。 2、value值有重复导致。 ...
a-tree-select 树形下拉选择器 异步请求数据
qq_43541443的博客
03-21 1082
这样写的原因,因为后端不提供下级节点的数据 所以才这样写 获取第一个接口返回的数据,根据数组id请求下级节点。保留了loading加载。
a-tree-select value值重复导致树的层级错乱
我只是个很菜的前端
10-11 570
a-tree-select value值重复导致树的层级错乱
[已解决]antd a-select Duplicate keys detected: ‘55‘. This may cause an update error.
SSophia的博客
05-09 952
Duplicate keys detected: '55'. This may cause an update error. <a-form-item label="供货商" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }"> <a-select mode="combobox"
vue自定v-model实现表单数据双向绑定问题
10-18
vue.js的一大功能便是实现数据的双向绑定。这篇文章主要介绍了vue自定v-model实现 表单数据双向绑定的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
el-select数据过多懒加载的解决(loadmore)
01-19
el-select数据过多处理方式 在日常项目中el-select组件的使用频率是非常之高的. 当数据过多时渲染时间非常长, 这里提供几个处理方式. 远程搜索 组件提供了远程搜索方式, 也就是按照你输入的结果匹配选项. 下拉懒...
vue.js 解决v-model让select默认选中不生效的问题
11-20
笔者今天在开发中遇到一个看起来很神奇的问题，平时编辑的页面我们select下拉选框利用vue.js 的v-model来实现自动选中，今天无论如何都选不中，后来经过很久的复查和大神的一句话终于解决这个这个问题，顺便分享一下...
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 430
步骤很详细，直接上教程……
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 206
vue echarts 柱状图 堆叠柱状图
vue 实现级联选择器功能
清音的博客
04-22 532
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 426
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
微信小程序vue.js+uniapp服装商城销售管理系统nodejs-java
专注分享bishe530的博客
04-21 422
最基本的是，Spring Boot是一个可以被任何项目的构建系统使用的库集合。Spring Boot 是 Spring 家族中的一个全新的框架，它用来简化Spring应用程序的创建和开发过程。（4）实证研究法：自己进行大量的编码测试，一切从动手编码出发，结合自己以前的编程基础，实现系统所需要的功能。entity: 实体，用来放与数据库表里对应的实体类，表中的字段对应类中的属性值，并附有set/get方法。（1）调查法：从实际的系统开发目的出发，结合系统需求调研，得出本系统的功能结构模块。
Vue-router的动态路由：获取传递的值
woliuhuaqiangla的博客
04-22 405
Vue.js是一款流行的JavaScript框架，用于构建单页面应用程序。它提供了许多有用的功能，其中之一是Vue-router，它允许您轻松地管理应用程序的路由。Vue-router支持动态路由，这意味着您可以在路由中使用变量，并在组件中访问它们。本文将介绍如何定义Vue-router的动态路由，以及如何获取传递的值。动态路由的优缺点动态路由是指根据特定的参数来动态地生成路由，这在使用Vue-router时是非常常见的。
vue3中a-tree-select怎么进行数据渲染
03-30
在vue3中，使用a-tree-select进行数据渲染的步骤如下： 1. 引入a-tree-select组件： ``` <template> <div> <a-tree-select v-model="selectedKeys" :tree-data="treeData" :show-checkbox="true"></a-tree-select> </div> </template> <script> import ATreeSelect from 'ant-design-vue/es/tree-select'; export default { components: { ATreeSelect, }, data() { return { selectedKeys: [], treeData: [ { title: 'Node1', value: '0-0', key: '0-0', children: [ { title: 'Child Node1', value: '0-0-1', key: '0-0-1', }, { title: 'Child Node2', value: '0-0-2', key: '0-0-2', }, ], }, { title: 'Node2', value: '0-1', key: '0-1', }, ], }; }, }; </script> ``` 2. 在data中定义选中的节点和树形数据： ``` data() { return { selectedKeys: [], // 选中的节点 treeData: [ // 树形数据 { title: 'Node1', value: '0-0', key: '0-0', children: [ { title: 'Child Node1', value: '0-0-1', key: '0-0-1', }, { title: 'Child Node2', value: '0-0-2', key: '0-0-2', }, ], }, { title: 'Node2', value: '0-1', key: '0-1', }, ], }; }, ``` 3. 在模板中使用a-tree-select组件进行渲染： ``` <a-tree-select v-model="selectedKeys" :tree-data="treeData" :show-checkbox="true"></a-tree-select> ``` 其中，v-model绑定了选中的节点，tree-data绑定了树形数据，show-checkbox属性表示是否显示checkbox。 这样就完成了a-tree-select的数据渲染。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Sun Peng

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值