记录 antd 里select 的一个小坑

最新推荐文章于 2024-08-10 15:49:03 发布
原创 最新推荐文章于 2024-08-10 15:49:03 发布 · 2.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#antd

本文介绍在使用 Ant Design 的 Select 组件时遇到的一个常见问题：当 value 值为空时，Select 会显示一个空的标签。文章详细解释了这一现象的原因，并提供了解决方案——将 value 设置为 undefined。

使用成熟的UI框架当然就觉得很舒服、很快捷。但是总会遇到一些不曾预料的问题

在此记录一下使用antd的select时候的一个小坑 以及解决办法

在这里插入图片描述

当Select的 value 为空时。可能会遇到上述的问题，产生一个空tag。

在这里插入图片描述
这当然是不期望问题，在研究了一下项目和文档之后，发现当 value 为空时可以，是相当于添加了一个空字符串的内容，所以会产生一个空tag标签。 解决办法就是赋值一个 undefined就会解决问题

在这里插入图片描述

在这里插入图片描述

elementUI之el-select多选tag数值问题，研究和改造
禅思院
07-21 9128
写在前面的话 我们在使用官网的UI组件的时候，总会遇到这样活着那样的展示问题，这些虽然都是小小的问题，但是产品经理就是非要和你过不去，说这些不是我想要的样子，而我们就是因为这个小小展示问题，功能没问题，就是要花很大的时间，将官网上的组件进行一顿改造，其实我们也很欲哭无泪啊！毕竟组件不是我们开发的，开发一套组件也不是一朝一夕能完成的。所以我们只能默默的去改造，改造的过程，心里也不知道埋怨多久啦！下面我改造和研究的一些组件的问题，以select 多选tag 问题！ 使用过程 我们用的是element-ui 的
08-AntD框架的upload组件上传图片时遇到的一些坑
最新发布
weixin_48053866的博客
06-27 790
本次做后台管理系统，采用的是 AntD 框架。涉及到图片的上传，用的是AntD的upload组件。前端做文件上传这个功能，是很有技术难度的。既然框架给我们提供好了，那就直接用呗。结果用的时候，发现 upload 组件的很多bug。下面来列举几个。
解决Antd中 select中的value值要是为空，placeholder不生效
水平有限，凑合看
03-01 2885
解决Antd中 select中的value初始化的值要是为空，或者清空value值，placeholder不生效，比如在代码中 把select的默认值设置为空 下面是select组件 下面是页面显示的提示框 解决这个问题可以把select的value的初始化的值设置为undefined 下面是显示的框 ...
AntDesignVue Select 选择器 选项 有默认空选项
weixin_45526332的博客
11-18 2395
这种情况是因为 v-mode绑定的值 初始值不是undefined了，只要在修改该值之后 将默认值重新设置为undefined就行了。
antd Select 选择器占位符不显示
agua001的博客
07-22 785
html: <a-select v-model="equipment" @change="getEquipment" placeholder='请选择设备厂商' defaultValue="" > <a-select-option :value="String(item.id)" v-for="item in $attrs.equipmentList" :key="item.id" > {{ item.manufacturesN
select下拉选择第一个选项为空白、option无法选中的解决办法，
qq_31620497的博客
05-17 1万+
问题：&lt;select ng-model="id"&gt; &lt;option value="{{v.id}}" ng-repeat="v in list" ng-bind="v.name" ng-selected="v.id == id"&gt;&lt;/option&gt; &lt;/select&gt;第一个选项为空白；或者
解决antd Select选择器空标签输入
希望我快乐
03-02 1779
antd选择器空标签
# AntD中数据校验方式分类整理
DoubleJan的博客
11-11 1813
一 概述 这篇文章主要整理了我在近期工作中，所使用Form表单组件，并进行数据校验的心得。整理出来了三种主要的校验需求，分类梳理了开发思路和方法，以及部分Form表单使用的注意事项。 这三种分类为： 数据联动 单一数据校验 多数据联动校验 二 数据联动 有时候我们表单中的某一个控件的值可能会在别的控件中使用，或者，我们需要对输入值格式化。 举个例子，加入我们需要做一个新增档案的功能，某种事物的...
Vue 2.x折腾记 - (16) 基于Ant Design Vue 封装一个配置式的表单搜索组件
CRPER
04-10 7349
前言 这次的后台管理系统项目选型用了Vue来作为主技术栈； 因为前端时间用过React来写过项目(用了antd)，感觉很棒棒。 这次就排除了Element UI,而采用了Ant Design Vue; 分析整个项目原型后，发现又可以抽离类似之前的React表格搜索组件 React 折腾记 - (6) 基于React 16.x+ Antd 3.封装的一个声明式的查询组件(实用强大) 效果图 响...
Vue学习（十五）——vue遇到的坑
sophiacan110的博客
12-15 739
（1）用cli-3新建了一个项目，代码run没有提供错误，但是浏览器程序员模式提示： “ You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.” 解决方案:在vu...
Ant-Design-Vue快速上手指南+排坑
丁爸的博客
08-10 2586
Ant-Design-Vue 是一个功能强大、设计精良且易于使用的 Vue 组件库。通过遵循上述快速上手指南，你可以快速开始在项目中使用 Ant-Design-Vue，并构建出美观且功能强大的 Vue.js 应用。记得查阅官方文档以获取更多详细信息和高级用法。
解决select 下拉框运行时总会有一个空值(空选项)的问题
weixin_34198797的博客
12-27 4896
项目中用到很多下拉选项都会多出一个空选项,如图运行结果 总会有一个空值出现,解决办法如下: 效果如下: 添加图中框选的代码即可,我是在Angularjs中使用的,在不用框架的情况下: <option style='display: none' value=''></option> 其实就是添加一个option,value为空,样式为不显示di...
Ant Design Vue select 中label-in-value的使用，以及动态设置select默认值，默认值为空时placeholder不显示的问题
qq_43710066的博客
03-30 8357
Ant Design Vue select 中label-in-value的使用，以及动态设置select默认值，默认值为空时placeholder不显示的问题
ant design vue：select选项太长显示不全
1111111111
02-06 3145
加:dropdownMatchSelectWidth='false'即可，但是不同浏览器显示有差异，比如谷歌上显示正常，但是火狐上虽然变宽了一点，但依旧有若干选项显示省略号。auto-complete其实跟select类似，我这个案例是用auto-complete做的。
Ant Design Vue Select下拉框内容显示不全问题解决
三劫散仙
11-14 2752
设置完之后：dropdownMatchSelectWidth={false}，已经全部展开了。
vuetify v-select 展开后 点击空白处不消失以及其他组件不起作用的解决办法
qq_28059167的博客
03-17 746
vuetify v-select 展开后 点击空白处不消失以及其他组件不起作用的解决办法 在最外层盒子加上data-app=“true” <template> <div class="box" data-app="true"> <v-select> </v-select> </div> </template> 至于为什么 我也不是很清楚，可能是 加上这个 vuetify才能找到这个元素吧 ...
（详解）Vue设置select下拉框的默认选项（解决select空白的bug）
热门推荐
小安驾到的博客
09-19 1万+
解决用vue动态渲染select下拉框时，select下拉框会出现空白的bug
vue中selected默认选择空白解决方案)
Your_Smile_的博客
07-04 2947
一. 普通写法 <select > <option>a</option> <option>b</option> <option selected>c</option> </select> 备注:直接在option中添加selected属性 二.vue中的写法(默认...
vue-design-vue的Select选择器清除内容后为空白，placeholder不显示
yolo_link的博客
07-20 3021
我们用placeholder来进行用户提示，但是在我们进行数据提交之后会发现我们选择的内容仍然存在于选择框内，这其实是不符合我们的业务逻辑的，所以就需要进行提交后的清除。//直接把type的值设置为空字符串是没用的，只有赋值为undefined才能实现清除效果。可以想象我用v-model进行双向数据绑定，在提交之后把数据重新赋值为空，这样不就可以清除了嘛。在清空的时候也会遇到这样的处理问题，依旧是把值设置为undefined就能解决啦！我们在使用的时候只需要加上配置项v-model，主要来控制清除的。...
antd select 的value可以是一个对象吗
03-22
<think>好的，我现在要解决用户的问题：“antd select 的value可以是一个对象吗”。首先，我需要确认用户的问题是关于Ant Design（antd）的Select组件是否允许其value属性接受对象类型的值。 首先，我会回顾Ant Design的官方文档，特别是Select组件的部分。根据记忆，antd的Select组件通常接受字符串或数字作为value，但有时候可能需要更复杂的数据结构。不过，我需要确认这一点，可能查看文档中的value属性说明。 接下来，考虑到React组件的常见模式，表单控件通常期望value是基本数据类型，以便于序列化和比较。然而，antd的Select组件可能提供了处理对象值的方法，比如使用getOptionValue属性来指定如何从选项对象中提取值。或者，用户可能误解了value和选项之间的关系，比如选项是一个对象，但实际提交的值是其中的某个字段。 然后，我会考虑用户可能的实际需求。用户可能希望在选择后，表单中可以获取到整个对象而不仅仅是某个键值，这在处理复杂数据时比较常见。例如，选择用户后需要获取用户的完整信息，而不仅仅是ID。这种情况下，可能需要将value绑定到对象的某个唯一标识符，然后在选项中存储整个对象，通过onChange事件获取对应的对象。 另外，我需要检查antd版本是否有变化。较新的版本可能支持对象类型的value，但需要特定的配置。例如，使用mode="multiple"时，如果直接传递对象数组可能导致问题，因为React需要唯一的key，而对象无法直接作为key。因此，可能需要使用valueProp来指定唯一标识符。 可能存在的误区是用户直接尝试将对象作为value，而没有正确配置Select组件的相关属性，导致渲染问题或表单提交错误。此时，正确的做法应该是使用getOptionValue来指定对象中的某个属性作为实际提交的值，同时在选项中渲染所需的其他属性。 还需要考虑自定义的选项渲染方式，通过optionRender或children自定义显示内容，但实际value仍然是基本类型。如果用户确实需要传递整个对象，可能需要将对象序列化为字符串（如JSON.stringify），但这样可能带来维护上的复杂性。 最后，总结结论：antd Select的value不能直接是对象，但可以通过配置提取对象中的特定属性作为value，同时在选项数据中保存整个对象，以便在需要时访问。如果用户需要存储复杂数据，应该使用状态管理来关联value和对应的对象数据。</think>Ant Design 的 Select 组件的 `value` **不能直接是一个对象**。以下是关键点解析和解决方案： --- ### 一、原生限制 1. **底层机制** Antd Select 基于 HTML `<select>` 封装，原生 `value` 仅支持 `string` 或 `number` 类型。 2. **渲染与对比问题** 对象无法直接作为唯一标识符，React 在 Diff 算法中无法正确比对对象的内存地址。 --- ### 二、官方推荐方案 #### 1. 使用唯一标识符 (ID) ```jsx <Select value={selectedUserId} // 存 ID onChange={(id) => { const selectedUser = userList.find(user => user.id === id); }} > {userList.map(user => ( <Select.Option key={user.id} value={user.id}> {user.name} </Select.Option> ))} </Select> ``` #### 2. 多选模式 + 对象存储 ```jsx // 多选时通过 ID 数组关联对象 <Select mode="multiple" value={selectedUserIds} onChange={(ids) => { const selectedUsers = userList.filter(user => ids.includes(user.id)); }} > {userList.map(user => ( <Select.Option key={user.id} value={user.id}> {user.name} </Select.Option> ))} </Select> ``` --- ### 三、强制存对象的变通方案 #### 1. 序列化对象为字符串 ```jsx <Select value={JSON.stringify(selectedUser)} onChange={(jsonStr) => { const user = JSON.parse(jsonStr); }} > {userList.map(user => ( <Select.Option key={user.id} value={JSON.stringify(user)}> {user.name} </Select.Option> ))} </Select> ``` *⚠️ 缺点：数据维护复杂，需处理序列化/反序列化* #### 2. 使用 `fieldNames` 映射（antd 5.7.0+） ```jsx <Select options={userList} fieldNames={{ label: 'name', value: 'object' }} value={userObject} /> ``` *注意：需搭配自定义表单控件处理* --- ### 四、最佳实践总结 | 方案 | 适用场景 | 优点 | 缺点 | |------|---------|------|------| | 存 ID + 关联对象 | 通用场景 | 简单高效 | 需维护对象关联 | | 序列化对象 | 简单对象存储 | 直接存储数据 | 维护成本高 | | `fieldNames` 映射 | antd 5.7+ 项目 | 官方新特性 | 版本限制 | **推荐优先级**: 存唯一标识符 > 使用新版 `fieldNames` > 序列化对象
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值