工作爬坑之el-form内el-select与el-input纵向不对齐的问题
这里写自定义目录标题工作爬坑之el-form内el-select与el-input纵向不对齐的问题原本的写法正确写法工作爬坑之el-form内el-select与el-input纵向不对齐的问题vue的资料看了挺多,自己做一个项目还是第一次.这是新项目踩到的第一个坑,关于el-form的.截图引用https://segmentfault.com/q/1010000021441147,因为我看这个帖
·
工作爬坑之el-form内el-select与el-input纵向不对齐的问题
vue的资料看了挺多,自己做一个项目还是第一次.这是新项目踩到的第一个坑,关于el-form的.截图引用https://segmentfault.com/q/1010000021441147,因为我看这个帖子下没有解决这个问题
问题写法
<el-form :model="form" label-width="100px" size="small" :inline="true">
<el-col :span="8">
<el-form-item label="第一块">
<el-input v-model="form.value1" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="第二块">
<el-input v-model="form.value2" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="第三块">
<el-input v-model="form.value3" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="第四块换行">
<el-select v-model="form.value4" >
<el-option></el-option>
</el-select>
</el-form-item>
</el-col>
</el-form>
这样很容易就复现问题
正确写法
将el-form的:inline属性删除,你会发现select比input的宽度要窄,为了保证他们宽度一样,在el-select上加上style=“width:100%”
<el-form :model="form" label-width="100px" size="small">
<el-col :span="8">
<el-form-item label="第一块">
<el-input v-model="form.value1" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="第二块">
<el-input v-model="form.value2" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="第三块">
<el-input v-model="form.value3" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="第四块换行">
<el-select v-model="form.value4" style="width:100%" >
<el-option></el-option>
</el-select>
</el-form-item>
</el-col>
</el-form>
更多推荐
已为社区贡献2条内容
所有评论(0)