element-UI下拉框、输入框宽度设置

已于 2024-01-08 15:51:45 修改
阅读量4.1k 收藏
点赞数 2
分类专栏： 小Tips 文章标签： vue.js javascript elementui
于 2022-11-11 11:53:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/momohhhhh/article/details/127803589
版权
开发界面时，经常遇到el-option中内容很短，但是el-select又很宽会占用位置 为了界面美观，普通的size还是不太方便的 可以在el-select、el-form等添加：

style=“width:xxx”

momo_via
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
更改element ui中select和input的宽度
qq_45276266的博客
08-07 2410
element ui中修改input和select框的宽度
Element：设置el-input宽度大小
热门推荐
az44yao的专栏
07-07 4万+
方法1. 利用Layout布局 下方审批人输入框太长，导致界面像假村花东施 解决办法： 使用Layout中的col组件，并设置其:span属性大小，:span为24时，铺满赤道、为8时就是占1/3，其他以此类推。 <el-form-item label="审批人"> <el-col :span="8"> <el-input v-model="formInline.user" placeholder="审批人">.
el-select设置下拉的宽度和选项框的宽度
最新发布
qq_38210427的博客
06-06 432
【代码】el-select设置下拉的宽度和选项框的宽度。
el-select如何自定义下拉选项框的宽度
博哥的二进制世界
07-30 1万+
el-select如何自定义下拉选项框的宽度背景解决办法 背景 默认情况下，el-select的下拉选项框的宽度会依据选项内容的长度而改变，当选项内容的长度过长的时候，下拉选项框的宽度也会变得很长，甚至可能会超出屏幕宽度，如下图所示： 解决办法 为了解决这一问题，我们可以通过给el-select添加focus事件的监听，当focus之后，动态改变el-option的宽度 <template> <div> <el-select v-model="textCaseType"
element中select下拉框如何实现宽度自适应
weixin_57182748的博客
11-05 9311
然后使用这个内容代替原来的选择框默认内容，覆盖掉原来的样式，达到自适应的母的。测试提了一个优化需求，使用下拉框选择时 ，根据选择的内容实现自适应的效果;如果使用element自带的select的选择器模块，它默认的select选择框的宽度是固定的。1.不能给输入框直接设置固定宽度，考虑动态获取选择内容的宽度，然后再赋值给选择框的宽度样式，没有这样操作，感觉会比较麻烦，刷新的话会存在问题。那么我们要做的效果是这样的，select选择框的宽度随着你选择的内容变化而自适应的。给用户的操作感觉会比较好。
element-ui 下拉框宽度设置
jack_tyc的博客
10-11 1687
element-ui select 下拉框宽度设置
【element-plus使用】el-select自定义样式、下拉框选项过长等问题解决
记录
11-29 8792
参考代码：选项的超出部分就会变成...。如果要自定义下拉框的宽度，则可以参考如下代码实现<el-option<style></style>选项的超出部分就会变成...。参考（里面还有种方法是用横向滚动条，但感觉用户体验会不太好,pass）补充：如果不希望选项超出部分变成…，直接都完整展示每个选项。可以参考下面的写法：（我还没试过；是群里uu提供的）
详解element-ui设置下拉选择切换必填和非必填
12-10
在Element-UI中，开发Web应用时常会遇到需要动态调整表单验证规则的情况，比如一个下拉选择框根据用户的选择，使得某个输入框变为必填或非必填。本篇文章将详细讲解如何实现这一功能。 首先，我们来看一下具体的...
详解VUE 对element-ui中的ElTableColumn扩展
08-27
在这个示例中，我们使用了一个名为 `renderType` 的 props 来控制表格列的渲染方式，可以是日期、输入框或下拉框等。我们也可以根据需要添加更多的功能和 props。 扩展 ElTableColumn 可以满足我们在实际项目中对...
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
主要介绍了vue2.0 element-ui中的el-select选择器无法显示选中的内容,在文中小编使用的是element-ui V2.2.3。具体解决方法及示例代码大家参考下本
解决element ui select下拉框不回显数据问题的解决
10-17
解决Element UI的`el-select`下拉框不回显数据的问题，关键在于检查数据类型、数据结构以及数据加载的时机。通过调试和比对，找出问题的根源，针对性地进行修复。在实际开发中，保持良好的编程习惯，如正确处理数据...
基于Element的组件改造的树形选择器(树形下拉框)
10-15
在本文中，我们将深入探讨如何基于Element UI框架进行组件改造，特别是创建一个树形选择器（树形下拉框）。Element UI 是一个流行的 Vue.js UI 框架，提供了许多开箱即用的组件，如 el-select 和 el-tree。然而，在...
解决ElementUI下拉框宽度过长问题
qq_19249021的博客
04-23 5882
相信不少人在使用ElementUI的el-select组件都会遇到下拉框宽度过长的问题。以下是解决方案。 <template> <div> // 省略若干无关代码 <el-select @focus = 'setMinWidthEmpty' style = 'width: 200px' // 其他属性 xxxx > <el-option // 其他属性xxx ></el-o.
下拉框与input输入框大小不一致问题
1234567
01-15 4896
margin-bottom: -10px使控件之间的距离变小，可以为负数值 当下拉列表 style="width:92%"时，可以与input输入框大小一致      &lt;el-form-item style="margin-bottom: -10px; " prop="string" label="输入框:" :label-width="formLabelWidth" &gt;
html表单下拉列表长度,Element UI默认的输入框和下拉框长度不一？
weixin_39923137的博客
06-03 1630
按照Element UI官网文档写的表单，官网上输入文本框和下拉选择框长度是一致的，而我在没有更改相关样式的情况下，下拉选框却比文本框要短？如图：下面是官网的截图：可以看到官网的下拉选择框是和输入框一致的宽度。下面是我的单页代码：Yeoman在线后台管理系统注册import { Notification } from 'element-ui'export default {name: 'regis...
Element ui Dialog弹出框宽度固定不变
PaPablame的博客
11-03 2439
一般我们引用Dialog弹出框时，弹出框的大小都是用width="30%"这样来设置，这样的话我们在缩小屏幕的时候弹出框就会根据你缩小屏幕的宽度的百分比来设置，这样你弹出框里面的东西就会溢出，如果你不想溢出就把宽度写成width="500px"，这样就可以了！注意px后面没有分号！！ ...
[element-ui] el-input根据内容自适应宽度
qq_14993591的博客
09-22 2144
【代码】[element-ui] el-input根据内容自适应宽度。
element-ui中input框，select框，date框宽度自适应问题
qq_32555123的博客
07-26 1563
input框宽度可以自适应，select框和date框宽度无法自适应，需要给宽度设置一个100%
element-ui中select和input的宽度不一致
weixin_55582221的博客
02-17 3842
今天写页面的时候用的是element-ui组件，其中用到了form表单，在页面中显示的效果是select组件要比input组件要长一点，美观度就有点不太好，效果如下图所示： 于是就想让input和select的宽度一致，首先找到了一种方法说是修改select的宽度，代码如下： <el-form-item label="所在国家:" prop="title"> <el-select v-model="ruleForm.county" placeholder="请选择国家" st
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; /* 下拉框宽度 */ } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值