关于el-form中el-input输入框的宽度问题详解

更新时间：2023年01月03日 12:03:35 作者：yellow-V

自从用了element-ui,确实好用,该有的组件都有,下面这篇文章主要给大家介绍了关于el-form中el-input输入框的宽度问题的相关资料,需要的朋友可以参考下

问题：要解决lable和input水平排列且input宽度可以自定义

1、el-form有个属性inline默认为false，故而lable和input不是水平排列，input输入框占了整行

<el-form :model="addDialogForm" :rules="addDialogRules" >
    <el-form-item prop="attr_name" :label="addTitle">
       <el-input v-model="addDialogForm.attr_name" style="width:100%"></el-input>
    </el-form-item>
</el-form>

2、将属性inline设置为true，实现了lable和input水平排列，但是宽度无法自定义设置

<el-form :model="addDialogForm" :rules="addDialogRules" :inline="true">
  <el-form-item prop="attr_name" :label="addTitle">
    <el-input v-model="addDialogForm.attr_name" style="width:100%"></el-input>
  </el-form-item>
</el-form>

3、关掉inline属性，给el-input包裹一层el-col,通过span属性设置宽度

注意：在inline="ture"时，没法设置宽度

<el-form :model="addDialogForm" :rules="addDialogRules" >
  <el-form-item prop="attr_name" :label="addTitle">
    <el-col :span="21">
    <el-input v-model="addDialogForm.attr_name" style="width:100%"></el-input>
    </el-col>
  </el-form-item>
</el-form>

附：el-input设置高度和宽度

一、设置input的高度

使用:rows="10" 来调整input 输入框的高度

二、设置input的宽度

/deep/ .bbb #input1 {
    min-height: 30px;
    margin: 0px;
    width: 1348px;
    height: 171px;

总结

到此这篇关于el-form中el-input输入框的宽度问题详解的文章就介绍到这了,更多相关el-form el-input输入框宽度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue router点击打开新的标签页的方法(最新推荐)
vue router点击打开新的标签页的方法,只需要在router-link中加入target="_blank"即可在新的页面打开标签,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
2023-10-10
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
这篇文章主要介绍了vue2实现移动端上传、预览、压缩图片解决拍照旋转问题,需要的朋友可以参考下
2017-04-04
使用vue-print-nb打印el-table问题总结
这篇文章主要介绍了使用vue-print-nb打印el-table问题总结,通过实例代码介绍了vue-print-nb 打印功能,本文结合实例代码讲解的非常详细,感兴趣的朋友一起看看吧
2024-01-01
Vue MVVM模型超详细讲解
MVVM是Model-View-ViewModel的缩写，MVVM是一种设计思想，这篇文章主要介绍了Vue生命周期和MVVM框架,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-11-11
Vue中常用rules校验规则(实例代码)
这篇文章主要介绍了Vue中常用rules校验规则，本文通过实例代码个大家介绍了一些校验方法,需要的朋友可以参考下
2019-11-11
Vue微信项目按需授权登录策略实践思路详解
这篇文章主要介绍了Vue微信项目按需授权登录策略实践思路详解,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-05-05
前端开发指南之vue-grid-layout的使用实例
vue-grid-layout是一个vue栅格拖动布局的组件,下面这篇文章主要给大家介绍了关于前端开发指南之vue-grid-layout使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-09-09
Vue express鉴权零基础入门
这篇文章主要介绍了详解express鉴权，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-02-02
如何使用RoughViz可视化Vue.js中的草绘图表
这篇文章主要介绍了如何使用RoughViz可视化Vue.js中的草绘图表，帮助大家更好的理解和使用roughViz，感兴趣的朋友可以了解下
2021-01-01
vue使用WebSocket模拟实现聊天功能
这篇文章主要介绍了vue使用WebSocket模拟实现聊天功能,通过创建node服务和server.js文件实例代码相结合给大家介绍的非常详细，需要的朋友可以参考下
2021-08-08