ant design vue：select选项太长显示不全

最新推荐文章于 2024-08-21 17:01:49 发布
最新推荐文章于 2024-08-21 17:01:49 发布
阅读量2.4k 收藏 1
点赞数
分类专栏： ant design vue 文章标签： 前端 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lilycheng1986/article/details/128905609
版权
文章讨论了在前端开发中，使用auto-complete组件时遇到的问题，即设置dropdownMatchSelectWidth=false后，在谷歌浏览器显示正常，但在火狐浏览器中仍有部分选项显示省略号。这表明存在跨浏览器兼容性问题。
摘要由CSDN通过智能技术生成

加:dropdownMatchSelectWidth='false'即可，但是不同浏览器显示有差异，比如谷歌上显示正常，但是火狐上虽然变宽了一点，但依旧有若干选项显示省略号。

auto-complete其实跟select类似，我这个案例是用auto-complete做的。

<a-auto-complete
    :value="inputVal"
    :data-source="list"
    :placeholder="placeholder"
    :dropdownMatchSelectWidth='false'
    @select="onSelect"
    @change="onChange"
  />

粉末的沉淀
关注
专栏目录
AntDesignVue一个基于AntDesign和Vue的企业级UI组件库
08-14
AntDesignVue提供了丰富多样的组件，包括但不限于： 1. **布局(Layout)**：提供栅格系统、页面布局等，帮助开发者快速搭建页面结构。 2. **导航(Navigation)**：如菜单(Menu)、面包屑(Breadcrumb)、页签(Tabs)、...
Vue2版前端源码，基于 Vue2+AntDesignVue 实现的 Ant Design Pro提供强大代码生成器的低代码平台
06-02
JeecgBoot—Vue2版前端源码，基于 Vue2+AntDesignVue 实现的 Ant Design Pro，提供强大代码生成器的低代码平台。 前端页面代码和后端功能代码一键生成，不需要写任何代码，保持jeecg一贯的强大
vue+ant vue select下拉框内容文本过长悬浮显示的方法
weixin_43994675的博客
02-04 4148
vue+antd select下拉框内容文本过长鼠标悬浮显示的方法 ```javascript <a-form-item label="结果："> <a-select allowClear show-search option-filter-prop="children" v-decorator="[ 'fileresults', { rul
Ant Design Vue Select下拉框内容显示不全问题解决
三劫散仙
11-14 1765
设置完之后：dropdownMatchSelectWidth={false}，已经全部展开了。
优化ant vue design 中a-select选择数据过多导致渲染卡顿问题
licongmingli的博客
08-19 422
解决a-select下拉列表渲染数据卡顿
vue select下拉框选项内容过长显示问题
ramsey17的博客
06-30 2515
在
关于 ant design vue a-select option 过长 显示不全的问题
qq_39930070的博客
04-27 8770
ant design vue a-select 的 选项 option 太长时，太长的部分 以... 显示，想看全的话，需要让它换行显示， 这种效果。 先去看API，发现有两个属性可能 可以实现这个效果 dropdownStyle ：下拉菜单的 style 属性 dropdownMenuStyle：dropdown 菜单自定义样式， 当时尝试之下 发现不可行。 然后想到直接写 CSS 样式，让它换行，但是发现在 style或者行内怎么写都不生效。 也不是深度选择器的问题。 然..
ant design Select组件中option内容太长
Csdn_____c的博客
05-24 4378
如何解决当Select组件的大小是固定的，但是option中文本内容太长了，导致页面不美观的问题？ant design 官网给了我们一个dropdownStyle的属性使用： 你可以在这个属性中写css样式来设置option的样式 <Select options={...options} dropdownStyle={{textOverflow:'ellipsis',width:"100px"}}> </Select> //这里width的宽度设置跟Se..
VUE element select 选项内容显示过长问题
wxzxmq的博客
07-03 9134
<style> .el-select__tags-text { display: inline-block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .el-select .el-tag__close.el-icon-close { top: -7px; } </style>
vue select多选 tag太长导致悬浮问题
YL_yangling的专栏
11-04 1284
解决方案： .el-select__tags { flex-wrap: wrap; //拆分换行 overflow: auto; // 滚动条 }
【vue】解决element-ui的el-select下拉框中选项内容太长问题
m0_67841039的博客
05-10 1976
1.给下拉框设置最大宽度; 2.内容一行展示,不换行,多余部分显示省略号; 3.有省略号的那一行,加悬浮提示; 4.没有省略号的地方不加悬浮提示
Ant design vue中的a-select在动态给option赋值之后，placeholder失效.pdf
12-16
在Ant Design Vue中，`a-select`组件是一个用于选择项的下拉框，它提供了丰富的交互和样式。在实际开发过程中，我们可能会遇到一个常见问题，即当动态地给`a-select`的`option`赋值后，其`placeholder`属性失效，...
Ant design vue 的组件禁用属性 disabled.pdf
12-16
在Ant Design Vue这一流行的前端UI库中，`disabled`属性是一个关键特性，它允许开发者禁用用户对特定组件的操作，从而实现对用户交互的控制。禁用状态通常用于表示组件处于不可操作或非活动状态，这在许多场景下都是...
editablecell:Ant Design of Vue之带select控件，单元格编辑功能的表格EditableCell组件
05-11
可编辑单元格 项目设置 yarn install 编译和热重装以进行开发 yarn run serve 编译并最小化生产 yarn run build 运行测试 yarn run test 整理和修复文件 yarn run lint 自定义配置 请参阅。
vue2修改element-ui中select组件下拉选项内容过长导致下拉框宽度过长问题
最新发布
weixin_47102346的博客
08-21 1008
el-select的focus获取焦点事件、popper-append-to-body属性，修改element-ui源码，element-ui中select下拉项内容过长导致下拉框宽度过宽问题的修改
vue中el-select下拉框文字过长时，导致dropdown溢出问题，加入横向滑动条
qq_39111164的博客
08-18 2216
问题描述： 解决方法： Code： <el-select v-model="strengthForm.route" placeholder="" style=' width: 100%' @focus="getRouteNameList()" filterable popper-class="select-dropdown"> <el-option v-for="item in routeList" :key="item.key" :lab
利用el-tooltip来对el-select选项过长进行优化
smallteddy.blog.csdn.net
07-09 6001
1、缺陷演示 可以看到当选项过长时，会撑开选项框。 2、优化后效果演示 主要是做出的省略操作，并且鼠标移动上去显示全部的信息。 3、代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten
vue element 多选下拉框内容过长显示‘...’ 鼠标悬浮显示全部
m0_48317876的博客
06-13 5340
element 多选下拉框过长显示省略号，鼠标悬浮显示全部内容
【vue】解决element-ui的el-select下拉框中因选项内容太长导致容器宽度过长问题
Hi_MrXiao的博客
12-07 6520
使用el-select下拉组件时，当下拉框中的选项内容很长会自动撑开容器宽度，导致页面效果很不好。如果不想使用组件默认的样式效果（超出的文字隐藏，并且后面添加省略号）属性设置下拉弹出框自定义类型 customDropdown。想使用横向滚动条展示所有内容，可以再加上下面的样式代码。为false：不将下拉弹出框插入至 body 元素。1、首先设置el-select的属性。3、设置下拉框的宽度。
antdesignvue select 设置选项
05-20
Ant Design Vue 的 Select 组件可以通过 `options` 属性设置选项，该属性接受一个数组，数组中的每个元素都是一个对象，包含 `value` 和 `label` 两个属性，分别表示选项的值和显示文本。 以下是一个示例： ```html <template> <a-select v-model="selectedOption" :options="options" /> </template> <script> export default { data() { return { selectedOption: '', options: [ { value: 'option1', label: '选项1' }, { value: 'option2', label: '选项2' }, { value: 'option3', label: '选项3' }, ] } } } </script> ``` 在上面的示例中，我们通过 `options` 属性设置了三个选项，用户选择的选项会通过 `v-model` 绑定到 `selectedOption` 变量中。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值