element 表单中使用el-col 导致输入框无法获取焦点，点击输入无效

系统管理员 2023-01-05 12:23 130阅读 0赞

## el-col和el-form要慎用 ##

在一个Vue+element 的项目中添加一个表单，因为布局问题不能使用行内表单模式，于是就想到了结合布局组件使用：(结果 在布局组件中的输入框无法获取焦点，el-col和el-row要慎用)

<el-form :inline="true" :model="formInline" class="demo-form-inline">
    	<el-col :span="6">
    	  <el-form-item label="客户名称">
    	    <el-input v-model="formInline.user" placeholder="请输入客户名称"></el-input>
    	  </el-form-item>
       </el-col>
       <el-form-item label="开户银行">
        <el-select v-model="formInline.region" placeholder="请选择开户银行">
          <el-option label="农行" value="shanghai"></el-option>
          <el-option label="中行" value="beijing"></el-option>
        </el-select>
       </el-form-item>
       <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
       </el-form-item>
    </el-form>

解决方法：不能只单写一个el-col，要配合一起el-row使用。

<el-row>
      <el-col :span="12">
        <el-form-item label="客户名称" prop="minorder">
          <el-input v-model="addForm.customerName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="时间" prop="time">
          <el-input v-model="addForm.time"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

发表评论取消回复

表情：

评论列表（有 0 条评论，130人围观）

还没有评论，来说两句吧...

相关阅读

相关 webview设置禁用连接点击，输入框焦点弹出键盘

方法一 wv.setClickable(false);//禁用连接，按钮点击 wv.setFocusable(false);//禁用输入框获取焦点弹出键盘方法二

末蓝、/ 2023年10月04日 12:06/ 0 赞/ 112 阅读

相关 Vue项目中使用el-input,在IOS上点击输入框不聚焦,弹出输入框也无法输入

为了防止在ios上长按(图片或文字)出现选中效果,在全局引入了user-select：none样式,它会影响input，textarea输入框,把该行代码注释掉就好,试了一下,

偏执的太偏执、/ 2023年01月15日 15:25/ 0 赞/ 359 阅读

相关 element 表单中使用el-col 导致输入框无法获取焦点，点击输入无效

el-col和el-form要慎用在一个Vue+element 的项目中添加一个表单，因为布局问题不能使用行内表单模式，于是就想到了结合布局组件使用：(结果在布局组件

系统管理员/ 2023年01月05日 12:23/ 0 赞/ 131 阅读

相关输入框默认文字点击消失

使用javascript完成：代码： <script language="javascript" type="text/javascript">

港控/mmm°/ 2022年08月13日 15:56/ 0 赞/ 303 阅读

相关输入框获取焦点到离开焦点发生了什么

1、过程 onfocus -> 键盘输入 -> onkeydown -> onkeypress -> onkeyup -> oninput -> 失去焦点 -> oncha

ゞ浴缸里的玫瑰/ 2022年04月08日 12:56/ 0 赞/ 435 阅读

相关常见输入框的验证及点击清空输入框

效果图 ![在这里插入图片描述][20190425193835157.png] input框内输入内容后显示删除图标，并实现点击图标清空input内容 ![在这里

青旅半醒/ 2022年02月14日 04:53/ 0 赞/ 667 阅读

相关 js输入框输入点击按钮添加表单元素

添加表单元素 html <div id="form"> 请输入姓名: <input type="text" id="name"> <br>

绝地灬酷狼/ 2022年01月28日 00:25/ 0 赞/ 643 阅读

相关微信小程序开发中input框在模拟器上点击输入无效，无法输入文字

经过测试和网上查阅资料，发现在win10系统下，把默认的文本和项目显示设置125%修改为100%即可解决。或者不修改，鼠标长按input框也可获取焦点输入文字，不影响手机实际体

客官°小女子只卖身不卖艺/ 2022年01月10日 14:21/ 0 赞/ 1088 阅读

相关 Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug

DOM的滚动 DOM规范中并没有规定各浏览器需要实现怎样的滚动页面区域，各浏览器实现了相应的方法，可以使用不同的方式控制页面区域的滚动。这些方法作为HTMLElement类型

我不是女神ヾ/ 2021年11月05日 10:00/ 0 赞/ 442 阅读

相关点击增加输入框

js: function insertTag(num)\{ var address=document.getElementById("tag"); var i=a

朱雀/ 2021年09月10日 06:58/ 0 赞/ 525 阅读