如果你希望下拉框的宽度与 el-select 输入框的宽度不同,或者需要更复杂的布局控制,可以使用 popper-class 属性来设置下拉框的样式。但请注意,popper-class 主要用于控制下拉框的样式,而不是输入框的宽度。 html <el-select v-model="selected" popper-class="custom-dropdown"> <el-option v-for=...
默认情况下,el-select的下拉选项框的宽度会依据选项内容的长度而改变,当选项内容的长度过长的时候,下拉选项框的宽度也会变得很长,甚至可能会超出屏幕宽度,如下图所示: 解决办法 为了解决这一问题,我们可以通过给el-select添加focus事件的监听,当focus之后,动态改变el-option的宽度 <template><div><el-select v-mod...
场景:因下拉项字数太多,会撑开下拉框宽度 解决办法:添加popper-class设置width: 0并给el-option添加title属性 <el-select v-model="form.caseId"popper-class="test-case-select-option"><el-optionv-for="item in options":key="item.id":title="item.code":label="item.code":value="item.id"/></el...
<el-option v-for="(item,index) in companies":key="index":label="item":value="item"/> </el-select> class为设置输入框的样式,popper-class为设置下拉框的样式 3、设置下拉框的宽度 /*自定义下拉菜单的样式*/.el-select-dropdown.customDropdown { width: 220px; position: relative; margin-left:...
1、右键HTML看下什么样式导致下拉框选项宽度这么宽 2、找不到的话就在项目里新建个页面试试效果，只放...
下拉框可以分为两部分,一部分是‘框’部分,另外一部分是‘下拉’部分,平常我们修改下拉框样式,无外乎就是修改这两个部分,如下图所示 修改框的宽度 修改框的宽度,最简单的方式就是给el-select加上一个style样式设置一下即可,注意直接使用style设置高度不会生效的,当然一般也不会去设置高度,因为高度是自适应的,会...
el-select选择框宽度与输入框相同|事件委托给el-option加title,。//el-select下拉框宽度与输入框保持一致document.addEventListener('click',e=>{setTimeout(()=>{letactiveNode=document.activeElement;if(activeNode){letpReadMore
二、常规、通用下拉框的多列选择: 【注】第二种常规、通用下拉框的多列选择,是在第一种的前端代码上删除几行代码就行(把icon显示标签删去),所以下面着重介绍第一种icon下拉框的多列选择。 思路 不使用下拉框标签<el-option>来做,使用elementUI提供的popover弹窗来做。
</el-option> </el-select> 思路:设置下拉菜单的最大宽度,然后文字超出时,出现横向滚动条。 .new-select { .el-select-dropdown { max-width:300px; left: 0 !important; box-shadow: 0px 2px 4px 0 rgb(0 0 0 / 10%); } .el-select-dropdown__item { ...