el-col和表单组件el-form组合使用时表单无法获取焦点

在使用el-col的地方加上el-row
https://blog.csdn.net/weixin_40119256/article/details/109224440
这个给出的解决方式是所有的item都加el-col或者自定义个样式

濮家大少 于 2020-03-12 17:56:04 发布 2739 收藏

版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

el-col和el-form要慎用

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

`<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>` 

- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16

结果发现在写在布局组件中的输入框无法获取焦点，el-col和el-row要慎用！
解决方法：不能只单写一个el-col，要配合一起el-row使用。例如：

`<el-row>
  <el-col :span="12">
    <el-form-item label="审批人">
      <el-input v-model="formInline.user" placeholder="审批人"></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <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-col>
</el-row>` 

- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15

以上就是我的解决方案！