因el-col布局引起的表单项无法点击的问题

问题缘由

近日需要开发一个双列的表单编辑页面，伪页面如下： 简单思索后决定使用el-col控制表单项宽度以达到双列的效果

问题出现

由于难度不大，三下五除二就搞定了，伪代码如下：

<el-form :model="edit.data" label-width="100px"> <el-col :span="12"> <el-form-item prop="name" label="用户名: "> <el-input v-model="edit.data.name" placeholder="请输入用户名"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item prop="type" label="账户类型: "> <el-select v-model="edit.data.type" placeholder="请选择账户类型" style="width: 100%;"> <el-option v-for="(item,index) in dict.types" :key="index" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> </el-col> <el-form-item prop="remark" label="备注: "> <el-input type="textarea" v-model="edit.data.remark" placeholder="请输入备注信息"></el-input> </el-form-item> </el-form>

[嘴角疯狂上扬] 然鹅，就在此时，问题出现了， 用户名输入框和账号类型下拉项无法点击的问题 具体大家可以到 el-form-item因el-col布局引起的部分表单项无法点击的问题的第一个表单中体验下

问题解决

首先通过百度找到了如下解决方案：vue+element UI中布局组件el-col和表单组件el-form组合使用时表单无法获取焦点 但是这里只说不能混用，那么真的不能混用吗？原因到底是为什么呢？

首先，通过浏览器控制台调试，发现将el-col的float:left样式取消后就正常了，如下图： 然鹅，这样虽说解决了不能点击的问题，但是一个表单项就占了一行，显然是不符合需求的，于是自作聪明，添加了如下样式：

.el-col { float: none; display: inline-block; }

嗯…问题解决了，但是这样的解决方案也不太优雅

继续找问题原因，当时写了这样一个表单，发现表单项是可以正常的点击的：

<el-form :model="edit.data" label-width="100px"> <el-col :span="12"> <el-form-item prop="name" label="用户名: "> <el-input v-model="edit.data.name" placeholder="请输入用户名"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item prop="type" label="账户类型: "> <el-select v-model="edit.data.type" placeholder="请选择账户类型" style="width: 100%;"> <el-option v-for="(item,index) in dict.types" :key="index" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> </el-col> </el-form>

这和上面的表单不就差了一个字段吗？为什么加上remark的表单项之后就不行了呢？ 比较两段代码，发现name和type的表单项的级次是三级，而remark的表单项的级次是二级，那么问题是不是出在了dom的层次结构上呢？ 有此想法，在remark表单项外层加了个el-col，发现可以正常点击了，伪代码如下：

<el-form :model="edit.data" label-width="100px"> <el-col :span="12"> <el-form-item prop="name" label="用户名: "> <el-input v-model="edit.data.name" placeholder="请输入用户名"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item prop="name" label="账户类型: "> <el-select v-model="edit.data.type" placeholder="请选择账户类型" style="width: 100%;"> <el-option v-for="(item,index) in dict.types" :key="index" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> </el-col> <el-col> <el-form-item prop="remark" label="备注: "> <el-input type="textarea" v-model="edit.data.remark" placeholder="请输入备注信息"></el-input> </el-form-item> </el-col> </el-form>

至此，问题成功解决

问题原理

带着问题，我们找一找源码，在el-form-item.vue的代码中发现了这样一个计算属性：

form() { let parent = this.$parent; let parentName = parent.$options.componentName; while (parentName !== 'ElForm') { if (parentName === 'ElFormItem') { this.isNested = true; } parent = parent.$parent; parentName = parent.$options.componentName; } return parent; },

这里通过当前组件，一级一级向上找，直到找到el-form组件就返回，而其他计算属性/方法依赖form计算属性，这也就能解释为什么remark表单项能正常点击，而name和type表单项无法点击的问题了。

总结

el-form下的el-form-item的dom级次务必一致，如有不一致的情况会导致表单项无法点击的问题