使用popper-class自定义下拉框宽度: 如果希望下拉框的宽度与el-select输入框的宽度不同,可以使用popper-class属性来设置下拉框的样式。 html <el-select v-model="selected" popper-class="custom-dropdown"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value...
场景:因下拉项字数太多,会撑开下拉框宽度 解决办法:添加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-select的下拉选项框的宽度会依据选项内容的长度而改变,当选项内容的长度过长的时候,下拉选项框的宽度也会变得很长,甚至可能会超出屏幕宽度,如下图所示: 解决办法 为了解决这一问题,我们可以通过给el-select添加focus事件的监听,当focus之后,动态改变el-option的宽度 <template><div><el-select v-mod...
修改框的宽度,最简单的方式就是给el-select加上一个style样式设置一下即可,注意直接使用style设置高度不会生效的,当然一般也不会去设置高度,因为高度是自适应的,会被内容撑开高度的 代码如下 <!-- 直接在这里加一个style即可 --> <el-select style="width:400px;" v-model="value" placeholder="请选择"> <...
el-select、el-cascader等下拉选项字符过多时,下拉框会自动边长,有时甚至会超出屏幕宽度,不美观。 因此,需要限制下拉框宽度,选项内容过长则以省略号显示,鼠标悬浮显示完整内容。 el-select解决方案 加`popper-class` 和 `title` ,设定宽度为 0 <el-select ...
一、icon下拉框的多列选择: 二、常规、通用下拉框的多列选择: 【注】第二种常规、通用下拉框的多列选择,是在第一种的前端代码上删除几行代码就行(把icon显示标签删去),所以下面着重介绍第一种icon下拉框的多列选择。 思路 不使用下拉框标签<el-option>来做,使用elementUI提供的popover...
本文将介绍如何设置el-select下拉框的宽度,使其与select框的宽度一致。 一、了解问题 在使用el-select时,默认情况下下拉框的宽度会大于select框的宽度,这是因为下拉框的宽度包括了选项的间距。如果想要让下拉框的宽度与select框的宽度一致,就需要对选项间距进行设置。 二、设置方法 1.使用CSS样式 可以通过为el-...
//下拉框关闭时,将搜索框内容置空 show(val) { if (val) { this.searchValue = '' } }, css样式,因为当前需要是右对齐,而el-select一般都是左对齐,且没有属性去控制,所以需要通过样式的修改慢慢调整 //下拉框样式 .companyType { width: 900px; ...
思路:用document.activeElement 找到页面当前活跃元素,找父级几点,判断是否为el-select选择框,根据是否有is-focus类名,判断下拉框是否展开,在全局找到下拉框的所有元素(可能不止一个),从哪个所有的下拉框元素中找到display属性为block的下拉框,设置宽度与当前活跃的el-selct输入框一样。
<el-select style="width: 80%" v-model="form.companyType" placeholder="请选择" ref="select" :popper-append-to-body="false" popper-class="option" @visible-change="show" clearable> <el-option value="1" hidden></el-option> <div class="companyType"> 自定义内容。。。 </div> </el-se...