记录 antd 里select 的一个小坑

最新推荐文章于 2024-02-04 11:48:58 发布
最新推荐文章于 2024-02-04 11:48:58 发布
阅读量2.1k 收藏
点赞数 3
分类专栏： antd 文章标签： antd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dark_programmer/article/details/109617073
版权

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

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

在这里插入图片描述

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

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

在这里插入图片描述

在这里插入图片描述

Dark_programmer
关注
专栏目录
elementUI之el-select多选tag数值问题，研究和改造
禅思院
07-21 8845
写在前面的话 我们在使用官网的UI组件的时候，总会遇到这样活着那样的展示问题，这些虽然都是小小的问题，但是产品经理就是非要和你过不去，说这些不是我想要的样子，而我们就是因为这个小小展示问题，功能没问题，就是要花很大的时间，将官网上的组件进行一顿改造，其实我们也很欲哭无泪啊！毕竟组件不是我们开发的，开发一套组件也不是一朝一夕能完成的。所以我们只能默默的去改造，改造的过程，心里也不知道埋怨多久啦！下面我改造和研究的一些组件的问题，以select 多选tag 问题！ 使用过程 我们用的是element-ui 的
select 移动端 第一个无法选中_总结在移动端碰到的坑
weixin_39611413的博客
12-21 707
一、安卓设备的select options的坑，尽量使用各浏览器内核都支持的api在添加 OPTION 元素时如果需要向指定索引前插入 OPTION，可以使用 options.add(option, index)；如果需要向 SELECT 尾部添加 OPTION，可以使用 options.add(option)；如果需要向指定索引处添加(或更改) OPTION，可以使用 options[index...
解决antd Select选择器空标签输入
希望我快乐
03-02 1269
antd选择器空标签
antd多选框 ＜a-select mode=“multiple“ ＞动态加载初始化时有空选择项的问题
qq_38854533的博客
03-03 1711
antd多选框 动态加载初始化时有空选择项的问题
vuetify v-select 展开后 点击空白处不消失以及其他组件不起作用的解决办法
qq_28059167的博客
03-17 625
vuetify v-select 展开后 点击空白处不消失以及其他组件不起作用的解决办法 在最外层盒子加上data-app=“true” <template> <div class="box" data-app="true"> <v-select> </v-select> </div> </template> 至于为什么 我也不是很清楚，可能是 加上这个 vuetify才能找到这个元素吧 ...
解决select 下拉框运行时总会有一个空值(空选项)的问题
weixin_34198797的博客
12-27 4740
项目中用到很多下拉选项都会多出一个空选项,如图运行结果 总会有一个空值出现,解决办法如下: 效果如下: 添加图中框选的代码即可,我是在Angularjs中使用的,在不用框架的情况下: <option style='display: none' value=''></option> 其实就是添加一个option,value为空,样式为不显示di...
antd Select 选择器占位符不显示
agua001的博客
07-22 677
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;第一个选项为空白；或者
AntDesignVue Select 选择器 选项 有默认空选项
weixin_45526332的博客
11-18 1857
这种情况是因为 v-mode绑定的值 初始值不是undefined了，只要在修改该值之后 将默认值重新设置为undefined就行了。
Ant Design Vue Select下拉框内容显示不全问题解决
三劫散仙
11-14 1752
设置完之后：dropdownMatchSelectWidth={false}，已经全部展开了。
# AntD中数据校验方式分类整理
DoubleJan的博客
11-11 1634
一 概述 这篇文章主要整理了我在近期工作中，所使用Form表单组件，并进行数据校验的心得。整理出来了三种主要的校验需求，分类梳理了开发思路和方法，以及部分Form表单使用的注意事项。 这三种分类为： 数据联动 单一数据校验 多数据联动校验 二 数据联动 有时候我们表单中的某一个控件的值可能会在别的控件中使用，或者，我们需要对输入值格式化。 举个例子，加入我们需要做一个新增档案的功能，某种事物的...
Ant Design UI组件之Select踩坑
weixin_43818482的博客
05-23 1769
前言 1. 在使用Ant design UI组件时总会遇到一些奇奇怪怪的问题，在本篇中将总结在使用Select时几种常见的问题 遇到的问题 在初始化Select值,如何根据value显示对应文本 实现代码如下 ... this.props.form.setFieldsValue({ latticeId, latticeNo, goodsId, remaining ...
使用antd组件
weixin_43857520的博客
11-13 327
新任务的是要用antd搞公司的两个页面，师姐以为我两天就能搞出来，结果我将近用了一周，还是靠我旁边那位兄弟指点又指点才完成的。。。。 那些标签啥的用inline-block调了好久，因为旁边那位兄弟说antd的栅格系统很坑。原来外面的div要给宽度，里面的元素也要给，搞不懂元素遍历，抄人家的例子稀里糊涂就做出来了 <div> {props.list.map((item, index) =>{ return(
REACT-antd的table的筛选问题
weixin_43844995的博客
07-15 9753
REACT-antd的table的筛选问题 作为一个刚刚接触react的小白，最近在学习的过程中碰到了不少问题，其中有些不可避免且努力了好久都没什么效果的问题，姑且先埋个坑吧，说不定以后就会了呢，要是有大牛看见愿意扶我一把那就更好了。 好，接下来进入正题。问题是这样的：在我使用antd的table的时候，发现其中的筛选功能好像是写死了的，比如antd中原来的筛选功能是写在name上的，然后我把它改...
antd-vue中的select组件实现下拉以及手输添加下拉框没有的内容
weixin_44912745的博客
08-26 2309
antd-vue中的select组件实现下拉以及手输添加下拉框没有的内容
AntVue a-form表单比较坑的地方
weixin_41977129的博客
07-04 1400
ant design vue官网中，form表单分别有以下两种方式。一、v-decorator方式的绑定（第一次用，坑多）二、v-model方式的绑定（以前经常用，还算顺手）2、 a-select 模糊查询、多选。
关于a-select下拉框回显时短暂显示id的情况以及下拉框有数据但无法选中的问题的解决方案
最新发布
qq_43710066的博客
02-04 880
关于a-select下拉框回显时短暂显示id的情况以及下拉框有数据但无法选中的问题的解决方案
antd中select组件使用value=‘‘后，提示文本不显示
实事求是，艰苦奋斗，小小的梦想，终将实现。
12-16 2426
问题描述 使用antd的select组件，并给组件设置对应的value属性为“”，但是发现之前的提示文本也不存在了。 class Loan extends Component { constructor(props){ super(props); this.state={ value1 : '', } } } <Select style={{width:200}} placeholder="请输入内容" val
在select中，载入时默认select为空白，选项内不显示空白项
热门推荐
casanover
03-08 3万+
今天做select的时候，页面要求为：载入默认选项框为空白，点击下拉框显示正常选项。 找了半天  有两种办法，一种纯css实现，一种借助js实现。先说js的办法吧。html：&lt;body onload="load()"&gt; &lt;select id="abc" &gt; &lt;option &gt;1&lt;/option&gt; ...
antd select默认选中第一个
05-23
可以通过设置 `defaultValue` 或 `value` 属性来实现antd select默认选中第一个选项。 使用 `defaultValue` 属性，代码如下： ```jsx import { Select } from 'antd'; const { Option } = Select; <Select defaultValue="option1"> <Option value="option1">Option 1</Option> <Option value="option2">Option 2</Option> <Option value="option3">Option 3</Option> </Select> ``` 使用 `value` 属性，代码如下： ```jsx import { useState } from 'react'; import { Select } from 'antd'; const { Option } = Select; const options = [ { value: 'option1', label: 'Option 1' }, { value: 'option2', label: 'Option 2' }, { value: 'option3', label: 'Option 3' }, ]; function App() { const [value, setValue] = useState(options[0].value); function handleChange(value) { setValue(value); } return ( <Select value={value} onChange={handleChange}> {options.map((option) => ( <Option key={option.value} value={option.value}> {option.label} </Option> ))} </Select> ); } ``` 无论是使用 `defaultValue` 还是 `value` 属性，都可以实现antd select默认选中第一个选项的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值