工作爬坑之el-form内el-select与el-input纵向不对齐的问题

工作爬坑之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>