element修改form的el-input宽度,el-select宽度的方法实现

更新时间：2022年02月17日 10:57:22 作者：新林。

有时候像form表单这样，页面的input、select等宽度不一定会是一样的，可能有些长，有些短，本文就介绍了如何element修改form的el-input宽度,el-select宽度的方法实现，感兴趣的可以了解一下

自从用了element-ui,确实好用，该有的组件都有，但是组件间的样式都固定好了，有时候像form表单这样，页面的input、select等宽度不一定会是一样的，可能有些长，有些短，这时候改变这些控件的宽度就有点麻烦了。

看了网上的好多文章，都没有找到解决方案，很多都说在el-input里面加width,但是效果不好，简单总结一下这个

例如我想要这种效果，把描述和邮箱都的宽度width设置长一点

在这里插入图片描述

首先在el-select里面增加style=“width:500px”，发现没有效果，为什么呢，因为在elment里面固定好了控件的样式，el-input里面增加style="width:500px"会有效果，但是我觉得更好的做法是利用css样式优先级，覆盖原来的element的css来处理。

在这里插入图片描述

我们调试一下页面，看看是那个css样式影响了宽度,可以看到.el-form–inline div.el-input固定为156px

在这里插入图片描述

4.利用css的样式优先级，我们在当前的页面再写一个自定义的class,我们首先定义一个当前页面的css，然后在这个页面里面重写css覆盖刚刚的页面样式，这样就不会影响到别的页面样式，

具体做法

1、定义一个当前页面样式user_info_page， 2、设置当前控件的样式descClass，3、在style的descClass样式里面重写这个el-select样式的宽度width

在这里插入图片描述

可以看到这样设置之后，el-input或者el-select的宽度就变长了

在这里插入图片描述

注：
1.style lang="less"才可以在一个css里面再设置css样式
2.这里的width没有用百分比，会带来新的坑，屏幕小的，页面可能会变形，百分比这个也可以（有空补上），但是可以把el-col的span设置大一点，优化布局，使之减少变形的可能

到此这篇关于element修改form的el-input宽度,el-select宽度的方法实现的文章就介绍到这了,更多相关element修改 el-input宽度,el-select宽度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue3使用vuex实现页面实时更新数据实例教程(setup)
在前端开发中往往会遇到页面需要实时刷新数据的情况,给用户最新的数据展示,这篇文章主要给大家介绍了关于vue3使用vuex实现页面实时更新数据(setup)的相关资料,需要的朋友可以参考下
2022-09-09
vue 首页加载,速度优化及解决首页白屏的问题
这篇文章主要介绍了vue 首页加载,速度优化及解决首页白屏的问题，具有很好的参考价值，希望对大家有所帮助。
2022-10-10
解决pycharm双击但是无法打开的情况
这篇文章主要介绍了解决pycharm双击但是无法打开的情况，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
解析Vue 2.5的Diff算法
本文将对于Vue 2.5.3版本中使用的Virtual Dom进行分析。updataChildren是Diff算法的核心，所以本文对updataChildren进行了图文的分析。下面通过本文给大家分享Vue 2.5的Diff算法，需要的朋友参考下吧
2017-11-11
Vue 2.5 Level E 发布了：新功能特性一览
很高兴Vue 2.5 Level E 发布了。在这篇文章中，我们将重点介绍一些更重要的的变化：更好的 TypeScript 集成，更好的错误处理，更好地支持单文件组件中的函数式组件以及与环境无关的服务端渲染
2017-10-10
VUE开发分布式医疗挂号系统的医院设置页面步骤
这篇文章主要为大家介绍了VUE开发分布式医疗挂号系统的医院设置页面步骤，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-04-04
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
本篇文章主要介绍vue2.0 移动端实现下拉刷新和上拉加载更多的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
Vue3中ref与reactive的详解与扩展
在vue3中对响应式数据的声明官方给出了ref()和reactive()这两种方式,下面这篇文章主要给大家介绍了关于Vue3中ref与reactive的相关资料,需要的朋友可以参考下
2021-06-06
在vscode中统一vue编码风格的方法
本篇文章主要介绍了在vscode中统一vue编码风格的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02
Vue中img的src是动态渲染时不显示的解决
今天小编就为大家分享一篇Vue中img的src是动态渲染时不显示的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11