只需要获取el-select的宽度,赋给el-option即可。 解决代码如下: <el-select v-model="devType" @focus="setMinWidth" style="width:100%"> <el-option v-for="item in devTypes" :key="item.value" :label="item.label" :value="item.value" :style="{'min-width': minWidth + 2 + 'px'}">...
1、右键HTML看下什么样式导致下拉框选项宽度这么宽 2、找不到的话就在项目里新建个页面试试效果，只放...
Element UI 的el-select组件默认情况下不会自动撑满父元素的宽度。为了实现这一效果,可以通过设置 CSS 样式或者使用内联样式来调整下拉框的宽度。本文将详细介绍这两种方法,并提供具体的代码示例。 方法一:使用 CSS 类 1. 使用全局样式 你可以在全局样式文件中定义一个类,然后将其应用到el-select组件上。这种方法...
resetInputWidth() 方法,思路来了,只要我在动画效果结束之后手动触发这个方法,就可以解决这个问题。 <el-select ref="selectInput" size="large" v-model="gender" class="el-field-input" placeholder="请选择"> <el-option v-for="item in genderOptions" :key="item.value" :label="item.label" :value...
概念:element的布局是把一行分成24列,el-col的宽度只是在布局时,根据number值占据的列数,而input是属于行内替换元素,效果等于块元素。会自然的撑到一行,而select是行内元素,有自己的固定宽度值,如果你的el-col的宽度小于select的宽度,会缩短,但是如果大于,当col的宽度超出时,select只显示自己的宽度;解决方法:在sel...
<el-option v-for="item in fileOptions" :key="item.id" :label="item.name" :value="item.id" > </el-option> </el-select> 思路:设置下拉菜单的最大宽度,然后文字超出时,出现横向滚动条。 .new-select { .el-select-dropdown { max-width:300px; ...
Element-UI 的el-select 使用的其实是 input 标签, 而 input 标签在浏览器中存在一个默认的宽度 , 大约是 100px (不同的浏览器表现不同) . 自定义的组件可以通过js来设置 input 的width 为auto (hack方法) function resizeInput() { $(this).attr('size', $(this).val().length); } $('input[type...
目前遇到一个问题,在用el-select组件的时候,当选项的内容很长的时候,会撑开下拉菜单的宽度,这样影响美观。具体如下图所示: 解决这个问题的思路:设置下拉菜单的最大宽度,然后文字超出时,出现横向滚动条。 解决时的问题就是,设置了宽度,横向滚动条却不出现,如下图所示,直接将超出的文字隐藏,并且后面添加省略号 ...
javascript vue.js 解决element UI中el-select选择器比el-input输入框默认宽度小 设置el-select选择器的样式为 style="width: 100%" 直接上代码: 精彩文章 评论可见,请评论后查看内容,谢谢!!! 您阅读本篇文章共花了:0小时00分02秒 大家都在找: ui:uic...