网站首页 Vue 正文

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

作者：yellow-V 更新时间： 2023-02-09 Vue

问题：要解决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;

总结

原文链接：https://blog.csdn.net/weixin_47169270/article/details/108568570

上一篇：Element中el-form表单举例详解_vue.js
下一篇：Vue组件的实现原理详细分析_vue.js

网站首页 Vue 正文

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

相关推荐