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样式的节点，应该遍历设置最小宽度，但是我只设置第一个竟然都能生效，原因未知。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了Vue简化用户查询/添加功能的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
下面小编就为大家分享一篇vue-cli+webpack项目 修改项目名称的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了vue父子组件状态同步的最佳方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
vue3.0找不到模块“./App.vue”或其相应的类型声明(多种情况分析)
这篇文章主要介绍了vue3.0找不到模块“./App.vue”或其相应的类型声明,报错原因是typescript 只能理解 .ts 文件，无法理解 .vue文件，本文通过多种情况分析给大家详细讲解，需要的朋友可以参考下2023-01-01
Vue-router不允许导航到当前位置(/path)错误原因以及修复方式
本文主要介绍了Vue-router不允许导航到当前位置(/path)错误原因以及修复方式，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了Vue.js应用回退或刷新界面时提示用户保存修改问题，本文通过两种手段防止运营编辑时丢失数据，具体内容详情，感兴趣的朋友跟随小编一起看看吧2019-11-11
这篇文章主要介绍了vue自适应布局（各种浏览器，分辨率）,主要使用了flex布局的flex:1属性和自适应的css+vh+百分比这种方式，开局设置overflow:hidden，主体main部分要设置：overflow:auto，需要的朋友可以参考下2022-09-09
Vue项目之安装引入使用vconsole方式(生产环境不显示)
在Vue2开发中,引入vConsole可以为移动端提供类似浏览器F12的调试工具,支持查看日志、网络请求等功能,vConsole是一个轻量、可拓展的前端调试面板,与框架无关,适用于多种前端框架,安装方法包括npm和CDN两种,可根据项目环境配置是否显示调试面板2024-10-10
这篇文章主要为大家详细介绍了Vue.js+HighCharts实现动态请求展示时序数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了vue组写一个组件,需要的朋友可以参考下2018-04-04
最新评论