问题写法
<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>