element ui的el

您所在的位置：网站首页 › el-select输入长度 › element ui的el

element ui的el

2024-07-01 11:29| 来源: 网络整理| 查看: 265

最终效果图有数据时：

image.png

无数据时：

image.png

常见情况-有数据时代码：

说明：控制选择框的宽度，通过设置el-select的style即可。控制点击选择框后弹出的选项框的宽度，直接设置el-option的style也可以，但是注意可能需要写上!important才生效。问题：问题来了，如果想设置el-option的最小宽度等于el-select怎么办？实际操作发现，若选项比较短通常自适应的宽度小于选择框宽度，效果如图：

image.png

但是刷新页面后，再次点击查看选项，其自适应的宽度又等于选择框的宽度了，效果如图：

image.png 费解，源码看不太懂，没看出是怎么触发调整选项框宽度的，于是只有人为干预。思考：只需要获取el-select的宽度，赋给el-option即可。解决代码如下： setMinWidth (val) { this.minWidth = val.srcElement.clientWidth }

说明： 1、给el-select添加focus事件，当选择框的 input 获得焦点时触发，获取当前节点的宽度存为最小宽度。 2、给el-option绑定样式min-width最小宽度即可。注意：因为不同选择框下的el-option不会同时出现，即便改变了同一界面的多个选项框宽度也没关系。

常见情况-无数据时还有一个问题，对于出现“无数据”的选择框时，如图

image.png

给el-option绑定样式是无效的，因为el-option根本不存在。解决代码如下：

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样式的节点，应该遍历设置最小宽度，但是我只设置第一个竟然都能生效，原因未知。

原文链接：https://blog.csdn.net/Beam007/java/article/details/89712183

【本文地址】

element ui的el

element ui的el

今日新闻

推荐新闻