vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > element修改el-select长度style=“width:XXpx“不生效

vue element修改el-select控件长度style=“width:XXpx“不生效的解决

作者:Kyulin151020

这篇文章主要介绍了vue element修改el-select控件长度style=“width:XXpx“不生效的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文