Antd 中 select 组件宽度太小

最新推荐文章于 2023-07-05 10:40:29 发布
最新推荐文章于 2023-07-05 10:40:29 发布
阅读量4.1k 收藏 3
点赞数 2
文章标签： react.js 前端 reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a15610039162/article/details/124929967
版权

前两天写select组件时，发现组件框很小

但是传入值后，长度是正常的

 

当我把宽度设置为 100%，结果并没有改变

width:'100%'

我猜测可能是外层的宽度是自适应的，于是设置了minwidth

minwidth:'xxxpx'

结果显示正常了，之所以不设置固定宽度，因为是多选的，希望能响应式的改变宽度

zzzzzvt
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
select下拉框宽度设置问题（自适应宽度，水平滚动条）
chao1513392的专栏
12-13 7万+
概述： 在实际应用中，很多时候都会用到select，但是由于下拉框的内容宽度不可控，就导致select宽度往往不是我们想要的。 需求：              1、给select设置最小值，在内容小于最小值时，要控制select的宽度是最小值，而不能让它太短，影响美观程度。              2、对应的也需要设置最大值。              3、当内容过长时，给出提示。
antd Tree组件 搜索标红 例子
09-09
antd 的Tree组件带搜索，搜索内容标红
antd Form组件行并列显示 Form表单属性为inline时,表单组件宽度问题
01-06
formLayout 不起作用 Form标签 layout属性设置为’inline’ 时 下拉组件宽度没有自适应: // 方法1:用Row + Col 定义自己需要的宽度,把layout属性设置为'horizontal', const formLayout = { labelCol: { span: 4 }, wrapperCol: { span: 14 }, } --------------------------------------------------------------------------
下拉框多选
09-10
支持下拉框多选. 扩展js类库，在项目中建立一个 js文件，命名为：MultiSelect.js 其代码为：
vue antd中的select用法
queen_css的博客
11-14 1493
下拉框的使用
封装antd Form表单，简便inline排版不方便控制每行个数和label与wrap的宽度
hs1219462412的博客
10-31 1850
基于antd form表单二次封装
antd select 遇到的问题综合
weitao_11的博客
03-09 3676
需求： 用antd做了一个table的下拉 使用的参数是style={{width: '200px'}} 但是存在宽度过宽的情况超出部分antd自动将字符串缩略使用 ...代替 期望全显示 过程 翻文档文档说使用 dropdownStyle可以修改下拉菜单的属性，呵呵毛用没有，不知道为啥就是会有一个width属性是强制赋值的，就算是删除了上面的style也没用 google查询为什么dropdownstype无效查到了后面这个，也没啥用 https://github....
学习记录514@react使用antd选择器设置下拉菜单宽度
教练我想学编程
12-15 6050
默认选择器和下拉菜单是等宽的，但是因为的选择项有些比较长，无法全部显示，因此要设置下拉菜单和选择器不一样宽。 新建index.css文件 .select-drop-down-platform { width: 360px; } 使用样式 注意一定要引入样式文件，我用的是函数式组件，这里只列举关键代码 dropdownMatchSelectWidth={false} 设置选择器和下拉菜单是不要等宽，一定要设置这个 dropdownClassName=“select-drop-down-plat.
antd option宽度自适应_《CSS世界》笔记——宽度、高度拾遗
weixin_39520869的博客
11-29 613
替换元素根据是否具有可替换内容，可以把元素分为替换元素和非替换元素。通过修改某个属性值呈现的内容就可以被替换的元素称为“替换元素”。常见的替换元素有<img>、<object>、<video>、<iframe>、<input>、<textarea>、<select>等。替换元素特性：内容可替换。如改变img的src...
ant design Select组件中option内容太长
Csdn_____c的博客
05-24 3881
如何解决当Select组件的大小是固定的，但是option中文本内容太长了，导致页面不美观的问题？ant design 官网给了我们一个dropdownStyle的属性使用： 你可以在这个属性中写css样式来设置option的样式 <Select options={...options} dropdownStyle={{textOverflow:'ellipsis',width:"100px"}}> </Select> //这里width的宽度设置跟Se..
深入理解Antd-Select组件的用法
10-15
主要介绍了深入理解Antd-Select组件的用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
antd-virtual-select:长列表优化antd select组件
05-12
开始 npm i antd-virtual-select ...antd 4.0 Select 组件已支持虚拟列表（ie11+），此组件基于 antd 3.x，可用于 ie9 浏览器 使用 基本使用同 antd Select，只是使用 SuperSelect 代替 Select impo
解决Antd 里面的select 选择框联动触发的问题
01-22
有两个 select框，且这俩select框是关联的，触发select1，select2里面才会有值。 但是现在的问题是这样的： 触发select1，触发select2，再触发select1，此时select2里面的值变成了上次一选中的value 值，而不会被...
在antd Form表单中select设置初始值操作
01-18
我就废话不多说了，大家还是直接看代码吧~ <Form.Item label=作用对象> {getFieldDecorator('targetId', { initial...Select placeholder=请选择作用对象> {targetList.map(entity => <Option key={enti
antd design vue中select组件多选maxTagTextLength属性不生效
最新发布
weixin_50662478的博客
07-05 952
这是属性不好使的页面，错乱了直接就。给它设置个最大宽度试试看。
antd vue select 下拉菜单不和选择器同宽
weixin_45346457的博客
02-05 4056
<a-select class="subscribe-select" dropdownClassName="drop-down-Style" // 下拉菜单的 className 属性 :dropdownMatchSelectWidth="false" // 下拉菜单不和选择器同宽 :value="userId" @change="handleUserChange" :defau..
[笔记]解决页面缩小时页面布局会乱的问题
banyao4415的博客
04-01 3982
给body加上一个min-width最小宽度，以px为单位，这样当页面变小时，当达到你所设置的最小宽度，body的宽度不再改变，超出的部分会用横向滚动条显示，其内所有元素的布局也不会受影响。 使用百分比设置宽度，所有会在页面变化后布局改变的元素的宽度都设置成百分比宽度，这样在缩放时，页面内的各个元素也会跟着缩放，宽度占比不变，当然前提是设置CSS样式前，先给body和h...
antd——封装select下拉框组件——解决数据量巨大时下拉框渲染缓慢的问题——基础积累
yehaocheng520的博客
05-09 4833
antd——封装select下拉框组件——解决数据量巨大时下拉框渲染缓慢的问题
select 宽度设定
热门推荐
weixin_30565199的博客
07-09 1万+
在使用Select时,有时候需要固定宽度,有时候需要自适应,下面说下要设定固定宽度时要注意的地方:控件设定宽度一般是直接指定width属性即可,但Select设定固度是使用style="width:n"的形式设定,如果只设置width属性,则Select的宽度还是会随下面选择项的宽度变化而变化的,如: <selectwidth="20px"><option>11...
antd 中Select组件保函Table组件如何做
05-19
可以使用antd中的Select组件和Table组件来实现这个功能。具体步骤如下： 1. 在Table组件中添加一个列，该列包含Select组件。可以使用Table组件的render属性来渲染该列。 2. 在Select组件中设置数据源，可以通过props传递数据源，也可以在组件内部设置。数据源通常是一个数组，每个数组元素都代表一个选项。 3. 在Select组件中设置选中项。可以使用props传递选中项，也可以在组件内部设置。选中项通常是一个值或者一个数组，表示当前选中的选项。 4. 在Select组件中设置事件处理函数。可以使用props传递事件处理函数，也可以在组件内部设置。事件处理函数通常是一个回调函数，当用户选中某个选项时会被调用。 示例代码如下： ```jsx import { Table, Select } from 'antd'; const { Option } = Select; const dataSource = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', }, ]; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', }, { title: 'Address', dataIndex: 'address', key: 'address', }, { title: 'Action', key: 'action', render: (text, record) => ( <Select defaultValue="1" style={{ width: 120 }}> <Option value="1">Option 1</Option> <Option value="2">Option 2</Option> <Option value="3">Option 3</Option> </Select> ), }, ]; const App = () => { return ( <Table dataSource={dataSource} columns={columns} /> ); }; export default App; ``` 在上述代码中，我们在Table组件的columns属性中添加了一个名为Action的列，该列包含了一个Select组件。我们在Select组件中设置了数据源和事件处理函数，用户选择某个选项时会触发onChange事件，我们在事件处理函数中可以获取到用户选择的选项。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值