vue element修改el-select控件长度style=“width:XXpx“不生效的解决
作者:Kyulin151020
element修改el-select长度style=“width:XXpx“不生效
问题
想要修改一个代码如下,里面的select的长度,然后单纯地通过设置style="width:200px"发现不生效,实际控件可触控区域以及占据区域确实变长了,但是视觉上没有变化。
<template> <div class="formHeader"> <div style="margin-left:20px"> <span>选项:</span> <el-select v-model="form.selectValue" placeholder="请选择" style="width:200px"> <el-option v-for="item in selectOption" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> </div> </template>
.formHeader .el-input { border-color: #409EFF; width: 150px; }
原因
Element-UI 的 el-select (el-cascader也是)使用的其实是 input 标签 , 而 input 标签在浏览器中存在一个默认的宽度 , 大约是 100px (不同的浏览器表现不同) 。
而如上图所示,我设置了el-input的宽度为150px,所以在底层,使用的input还是150px。
解决方法
设置如下样式即可:
.fromHeader .el-select .el-input { border-color: #409EFF; width: 200px; }
element ui的el-select框和选项框的宽度设置问题
最终效果图
有数据时:
无数据时:
常见情况-有数据时
代码:
<el-select v-model="devType" style="width:100%"> <el-option v-for="item in devTypes" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select>
说明:
控制选择框的宽度,通过设置el-select的style即可。控制点击选择框后弹出的选项框的宽度,直接设置el-option的style也可以,但是注意可能需要写上!important才生效。
问题:
问题来了,如果想设置el-option的最小宽度等于el-select怎么办?实际操作发现,若选项比较短通常自适应的宽度小于选择框宽度,效果如图:
但是刷新页面后,再次点击查看选项,其自适应的宽度又等于选择框的宽度了,效果如图:
费解,源码看不太懂,没看出是怎么触发调整选项框宽度的,于是只有人为干预。
思考:只需要获取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'}"></el-option> </el-select> setMinWidth (val) { this.minWidth = val.srcElement.clientWidth }
说明:
1、给el-select添加focus事件,当选择框的 input 获得焦点时触发,获取当前节点的宽度存为最小宽度。
2、给el-option绑定样式min-width最小宽度即可。
注意:
因为不同选择框下的el-option不会同时出现,即便改变了同一界面的多个选项框宽度也没关系。
常见情况-无数据时
还有一个问题,对于出现“无数据”的选择框时,如图
给el-option绑定样式是无效的,因为el-option根本不存在。
解决代码如下:
<el-select v-model="devType" style="width:100%" @focus="setMinWidthEmpty"> <el-option v-for="item in devTypes" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> setMinWidthEmpty (val) { // 无数据的情况下,给请选择提示设置最小宽度 let domEmpty = document.getElementsByClassName('el-select-dropdown__empty') if (domEmpty.length > 0) { domEmpty[0].style['min-width'] = val.srcElement.clientWidth + 2 + 'px' } }
说明:
1、给el-select添加focus事件,当选择框的 input 获得焦点时触发,获取当前节点的宽度存为最小宽度。
2、同时获取el-select-dropdown__empty样式的节点,设置最小宽度。
注意:
1、getElementsByClassName不是getElementByClassName
2、放置当前选择框有数据时执行该段报错,必须判断空节点的数量,存在再设置最小宽度。
3、若同时有多个el-select-dropdown__empty样式的节点,应该遍历设置最小宽度,但是我只设置第一个竟然都能生效,原因未知。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。