element下拉框的宽度控制

最新推荐文章于 2024-04-16 11:29:45 发布
最新推荐文章于 2024-04-16 11:29:45 发布
阅读量1.7k 收藏
点赞数 2
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60921906/article/details/125394193
版权

控制了显示框宽度，有时候下拉的内容宽度控制失败，

.custom-speed-wrap {

display: inline-block;

/deep/.el-input__inner {

width: 70px;

height: 36px;

margin-left: 0px;

}

/deep/.el-select {

width: 70px;

}

}

下拉内容宽度，会自动渲染出min-width:，这个宽度是根据，el-select宽度来的，所以控制该类宽度即可。 

Blumen713
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
解决el-select下拉选择框min-width抽风问题
jsj521314的博客
11-27 480
解决思路:使用自己写的样式没效果,给el-select 和 其父元素 或者 el-option 都没效果.再使用官网提供的属性popper-append-to-body 和 popper-class 依旧没有用.最后发现在源码里面它又一个行内样式的min-width导致了以上问题。问题描述:el-select 下拉选择框有一个min-width的属性,正常情况下它会跟着下拉框宽度走,但是抽风起来它会变的其宽无比.解决方案:在当前页面手动修改min-width的值,让其恢复正常.
在element-ui的select下拉框加上滚动加载
10-17
主要介绍了在element-ui的select下拉框加上滚动加载，本文以以element-ui中的select为例，给大家介绍的非常详细,需要的朋友可以参考下
Vue3+element PLUS 2.5 中el-select样式修改
最新发布
先生有火吗
04-16 439
首先是需要在<el-select>标签中添加:teleported="false"属性，表示不将弹出框元素添加到body当中。本人针对网上的一些教程进行了总结，然后自己进行了测试最终修改成功了，把代码发出来供大家参考。针对elementplus中的el-select样式是不是很多小伙伴都感觉难以修改呢？先展示下最终的样式效果（下拉框上面那个菱形我也不知道怎么改，望小伙伴告知）。然后是一系列对下拉框的修改，我就直接贴代码了，方便大家复制粘贴。
element-ui 下拉框宽度设置
jack_tyc的博客
10-11 1667
element-ui select 下拉框宽度设置
vue,element组件（下拉框）间的宽度和本身的宽度
xy405580364的博客
12-16 9206
label-width="50px" 距离上一个下拉框的距离 style="width: 125px" 下拉框本身的宽度 <el-form-item label="机构" label-width="50px"> <el-select v-model="formInline.institution" placeholder="机构" style="wi...
【解决方法】element-ui 中输入框input与下拉选择框没有在一条水平线上
追寻上飞的博客
07-19 1625
可以看到行元素内的子元素顶部都是对齐的，而且下拉选择框的顶部和行的顶部是有间隙的，因此问题就出现在对齐的属性上。如图所示，左边的输入框和右边的下拉选择框不在同一水平线上。相对于该元素所在行的基线的垂直对齐。...
解决ElementUI下拉框宽度过长问题
qq_19249021的博客
04-23 5857
相信不少人在使用ElementUI的el-select组件都会遇到下拉框宽度过长的问题。以下是解决方案。 <template> <div> // 省略若干无关代码 <el-select @focus = 'setMinWidthEmpty' style = 'width: 200px' // 其他属性 xxxx > <el-option // 其他属性xxx ></el-o.
解决element ui select下拉框不回显数据问题的解决
10-17
主要介绍了解决element ui select下拉框不回显数据问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Element input树型下拉框的实现代码
12-29
1.效果图 1.1 input聚焦时显示下拉框，再次点击下拉框或点击其他处下拉框消失，主要靠z-index添加遮罩...2.代码 ( vue.js + element-ui ) 2.1 html 会计主管> <el-input placeholder=请选择会计主管 clas
使用javascript实现下拉框的动态控制
07-22
资源名称：使用Javaｓｃｒｉｐｔ实现下拉框的动态控制   内容简介： 使用Javaｓｃｒｉｐｔ实现下拉框的动态控制 一、前言 下拉框是常用的一种web页面控件。它很简单实用，便于 操作者从…组选项...
设置selcet下拉菜单长度
云端飞翔
08-05 2182
添加style属性值。避免select选项以，最长的子串为默认长度。
ElementUi中select框在页面滚动时el option超出元素区域的问题
weixin_53558474的博客
04-20 1351
问题：在项目开发中发现elementUi中的select组件在页面滚动时会随着页面滚动并遮盖页面，如下图： 遇到这问题首先想到的css,但是没有知道好的解决方法, 在网上找到了相关的解决办法，在下面贴出来！！！ 1、创建js文件 // fackClickOutSide.js let lock = true; let el = null; const MousedownEvent = new Event('mousedown', {bubbles:true}); const .
解决element ui select multiple 超出宽度的问题
壮乡码农
01-29 832
/*解决element ui select multiple 超出宽度的问题*/ .el-select__tags-text { display: inline-block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
Element ui 中级联选择框点击数据超出可是页面调整
zjw19911113的博客
01-03 422
解决方法： 在全局样式中加入以下代码 App.vue中style加入或者导入的全局css样式中加入 /* 解决cascader级联样式表超出屏幕的问题 */ .el-cascader-panel { height: 210px; } 解决方法： 在全局样式中加入以下代码 App.vue中style加入或者导入的全局css样式中加入 /* 隐藏横向滚动条 */ .el-scrollbar__wrap{ overflow-x: hidden; } ...
element-ui ＜el-form＞内下拉框快速排版以及小问题
zyh19980808的博客
08-28 921
el-form文字和输入框，下拉菜单不在水平问题
element中select下拉框如何实现宽度自适应
weixin_57182748的博客
11-05 9176
然后使用这个内容代替原来的选择框默认内容，覆盖掉原来的样式，达到自适应的母的。测试提了一个优化需求，使用下拉框选择时 ，根据选择的内容实现自适应的效果;如果使用element自带的select的选择器模块，它默认的select选择框的宽度是固定的。1.不能给输入框直接设置固定宽度，考虑动态获取选择内容的宽度，然后再赋值给选择框的宽度样式，没有这样操作，感觉会比较麻烦，刷新的话会存在问题。那么我们要做的效果是这样的，select选择框的宽度随着你选择的内容变化而自适应的。给用户的操作感觉会比较好。
修改Element-ui中的Sidebar列表下拉框子项的宽度
CherishTaoTao的博客
06-24 3365
vue项目引入element-ui的侧边栏时，当调整sidebar侧边栏大小为180px时，下拉列表子项的宽度会超出（默认为200px）。如图所示：列表的默认样式中的子项宽度未能正确修改成和父级的一样， 即 < ul > 下的< li >未能和< ul >保持一样的宽度。1、浏览器F12打开元素选择，点击对应的元素选项： 2、找到样式区域，看准配置项： 3、根据提示找到路径： 4、打开css文件找到对应的配置项：...
elmentUI表单中input 和select长度不一致问题
sumiao64427的博客
04-21 7762
1.问题现象： 2.问题原因： 因为el-select右边有一个icon图标(右边的padding为35px),而el-input只有15px,所以就存在了一个宽度的误差. 3.解决方法： 方法一：当下拉列表 style="width:92%"时，可以与input输入框大小一致 <el-form-item label="图标类型" prop="iconId"> <el-select v-model="addEditForm.iconId" placeholder="请选择"
element-ui el-autocomplete设置输入框和下拉框宽度，详细代码
06-07
要设置 `el-autocomplete` 组件的输入框和下拉框的宽度，可以通过以下代码实现： ```html <template> <el-autocomplete v-model="value" :fetch-suggestions="querySearch" placeholder="请输入内容" :style="{width: inputWidth + 'px'}" > <template slot-scope="{ item }"> <div class="item">{{ item.value }}</div> </template> </el-autocomplete> </template> <script> export default { data() { return { value: '', inputWidth: 200, // 输入框宽度 }; }, methods: { querySearch(queryString, cb) { // ... }, }, }; </script> ``` 在 `el-autocomplete` 组件中，使用 `:style` 绑定一个对象，对象中的 `width` 属性可以设置输入框的宽度。例如，上面的代码设置输入框宽度为 200 像素。 如果需要设置下拉框的宽度，可以通过 CSS 样式来设置。例如： ```css .el-autocomplete__popper { width: 300px; /* 下拉框宽度 */ } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值