【elementUI】 下拉框的长度超过输入框？

最新推荐文章于 2024-06-13 17:01:56 发布
最新推荐文章于 2024-06-13 17:01:56 发布
阅读量1.3k 收藏
点赞数
文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41530639/article/details/117461886
版权

在这里插入图片描述
类似于这样，其实这个时候的输入框长度和下拉框长度是一样的，只不过位置没有对齐，试试将宽度扩展成100%
在这里插入图片描述
再去调样式

html表单下拉列表长度,Element UI默认的输入框和下拉框长度不一？
weixin_39923137的博客
06-03 1726
按照Element UI官网文档写的表单，官网上输入文本框和下拉选择框长度是一致的，而我在没有更改相关样式的情况下，下拉选框却比文本框要短？如图：下面是官网的截图：可以看到官网的下拉选择框是和输入框一致的宽度。下面是我的单页代码：Yeoman在线后台管理系统注册import { Notification } from 'element-ui'export default {name: 'regis...
使用elementUI对下拉框进行模糊查询
weixin_42378072的博客
05-19 3110
使用elementUI对下拉框进行模糊查询 背景：有的时候下拉框中的内容很多，有的options数据多达上百条，就需要我们在select中可输入字符进行模糊查询，在添加一个属性就可完成这个需求，代码如下： <el-select style="width: 100%;margin:6px 0" :size="size" filterable //该属性完成对下拉框中内容过滤匹配(模糊查询) @change="dataChange" :placeholder="$t('inOrder
element-plus下拉框和输入框宽度不一致，:popper-append-to-body=“false“失效
Liberty_yes的博客
03-23 1341
原因控制台看到下拉项的`DOM`元素时插入到`body`里面了，使用`:popper-append-to-body="false"`发现已经废弃，最后发现替换成`:teleported="false"`
elementui 输入框下拉面板宽度跟随输入框宽度
u010328533的博客
01-05 2332
elementui 输入框下拉面板宽度跟随输入框宽度 <el-form-item label="业务系统" prop="businessSystemId" class="select-mul" v-else> <el-select v-model="projectForm.businessSystemIdList" placeholder="请选择业务系统"
elementUI表单组件的输入框长度控制
a666666000的博客
06-08 9194
调整elementUI表单组件的输入框长度
elementui时间选择器和输入框等组件一起使用会导致宽度不一致超出容器
qq_48499167的博客
06-13 908
elementui时间选择器和输入框等组件一起使用会导致宽度不一致超出容器
elementui下拉框模糊查询
最新发布
01-24
当启用 `filterable` 属性时，组件会提供一个输入框用于筛选选项列表；而通过配置 `remote-method` 可以更灵活地控制数据源以及执行复杂的查找逻辑。 下面是一个简单的例子展示如何创建具有模糊匹配能力的选择器： ...
elementUI输入框后面带有单位
weixin_42132044的博客
11-04 2976
添加 slot=“append” <el-input style="width: 180px" placeholder="请输入" clearable > <template slot="append">元</template> </el-input> 示例图
Element表单自适应（输入框、下拉、级联、日期选择器）
weixin_30505751的博客
06-10 6342
基于Element的输入框、下拉、级联、日期选择器宽度一致，自适应 <template> <div class="test"> <el-form ref="form" :model="form" label-width="90px"> <el-row> <!-- 输入框 --> ...
下拉框与input输入框大小不一致问题
1234567
01-15 5019
margin-bottom: -10px使控件之间的距离变小，可以为负数值 当下拉列表 style="width:92%"时，可以与input输入框大小一致      &lt;el-form-item style="margin-bottom: -10px; " prop="string" label="输入框:" :label-width="formLabelWidth" &gt;
解决element ui 选择器创建条目过长时，条目内容溢出输入框的问题
重修班挂科少年
09-14 930
应用背景： 项目需求一个选择器可以输入创建条目 实现方式： 选择elment ui官网提供的创建条目选择器 发生的问题： 当创建条目过长时，会出现内容溢出的情况，如下图 解决办法： 修改选择器的CSS样式 <style> .el-select__tags-text { display: inline-block; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap
elementUI 可输入下拉框限制长度
m0_62476641的博客
10-17 1087
通过自定义指令，实现限制可输入下拉框的字符长度
element-ui的表单中，输入框、级联选择器的长度设置
atregret的博客
05-14 1435
表单长度控制
elmentUI表单中input 和select长度不一致问题
sumiao64427的博客
04-21 8614
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 下拉框宽度设置
jack_tyc的博客
10-11 1845
element-ui select 下拉框宽度设置
解决element-ui中select下拉框popper超出弹框问题
weixin_45185103的博客
11-24 5012
问题场景如下： 尝试了好几种解决方法，比如从下拉框el-popper使用fixed定位入手，修改popper-append-to-body，或者修改z-index，看了源码后又尝试监听表格滚动使用`this.$refs.table.handleClose()`关闭popper，但都未达到我想要的效果。尝试了网上一些解决方案，跟我之前的尝试一样，只有拖动滚动条停止的时候popper消失，滑动鼠标滚轮则无效。无奈我只好直接修改源码的visible来关闭popper，解决方法如下： ## 解决方法 1、把ele
Vue下拉框过宽溢出解决
前端小东
03-08 1367
记录一下，我们在使用element的下拉组件的时候，如果内容过长，会导致溢出非常的不美观，那么有没有什么解决 办法了。切记要加:popper-append-to-body="false"这个属性,不然没法生效哦。经过不断的寻找，终于找到了以下解决办法。最后来个效果图，大功告成。
element-UI下拉框、输入框宽度设置
momo_via的播客
11-11 4568
element-UI下拉框、输入框宽度设置
解决ElementUI下拉框宽度过长问题
qq_19249021的博客
04-23 6026
相信不少人在使用ElementUI的el-select组件都会遇到下拉框宽度过长的问题。以下是解决方案。 <template> <div> // 省略若干无关代码 <el-select @focus = 'setMinWidthEmpty' style = 'width: 200px' // 其他属性 xxxx > <el-option // 其他属性xxx ></el-o.
elementui下拉框和输入框自动铺满页面
11-20
Element UI 的下拉框 (el-select) 和输入框 (el-input) 都可以设置样式使其自适应或铺满其容器元素。要实现这两个组件自动铺满页面，你可以通过 CSS 或者 Vue.js 的 v-bind 或 v-model 属性配合计算属性来控制。 对于 el-select: 1. 使用 CSS，给 select 元素添加 `width: 100%` 和 `display: block`，让它充满其父元素宽度： ```html <el-select v-model="yourModel" style="width: 100%; display: block;"></el-select> ``` 2. 如果需要动态调整，可以在 Vue 中绑定一个计算属性来获取屏幕宽度： ```javascript computed: { fullWidthSelect() { return 'width: 100%;' } }, template: `<el-select :style="{ width: fullWidthSelect }" v-model="yourModel"></el-select>` ``` 对于 el-input: 1. 同样地，使用 `width: 100%` 和 `box-sizing: border-box` 来让输入框填满父元素： ```html <el-input v-model="yourModel" style="width: 100%; box-sizing: border-box;"></el-input> ``` 2. 计算属性示例： ```javascript computed: { fullWidthInput() { return { width: '100%', boxSizing: 'border-box' } } }, template: `<el-input :style="fullWidthInput" v-model="yourModel"></el-input>` ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值