效果如下主要是这一排的：  （tip:截图里边右边没有对齐，应该是这里截图的时候调试后的造成的，实际情况是对齐的） 一排要显示多个只需要在el-form-item中嵌套使用el-col就行了，官方文档关于表单里边的文档就有这种用法 ``` <el-form-item label="校区"> <el-col :span="11" style="padding-right: 10px;"> <el-select v-model="addFormData.ignoreTeachers" multiple filterable clearable="" placeholder="请选择校区" style="width: 100%;" class="select-level" size="small"> </el-select> </el-col> <el-col class="line" :span="2" style="font-weight: 700;">阶段</el-col> <el-col :span="11"> <el-select multiple filterable clearable="" placeholder="请选择阶段" style="width: 100%;" class="select-level" size="small"> </el-select> </el-col> </el-form-item> ``` **这里有两个注意的点** 第一个就是两个选择框的间距问题，只需要在第一个el-col设置一下`padding-right`即可，不能用margin-right，这样会顶到下一行去了。 ``` <el-col :span="11" style="padding-right: 10px;" ``` 还有就是那个阶段两个字默认不是左边那种描述的颜色，加上一个`font-weight`样式就可以保持一样了 **贴一段这段布局的完整代码** ``` <template> <div class="app-container"> <el-form ref="sendMesssageToStudentsRef" style="margin-top: 0px;" :model="addFormData" :rules="sendMesssageToStudentsRules" label-width="113px"> <el-form-item label="校区"> <el-col :span="11" style="padding-right: 10px;"> <el-select v-model="addFormData.ignoreTeachers" multiple filterable clearable="" placeholder="请选择校区" style="width: 100%;" class="select-level" size="small"> </el-select> </el-col> <el-col class="line" :span="2" style="font-weight: 700;">阶段</el-col> <el-col :span="11"> <el-select multiple filterable clearable="" placeholder="请选择阶段" style="width: 100%;" class="select-level" size="small"> </el-select> </el-col> </el-form-item> <el-form-item label="消息内容" prop="messageContent"> <el-input v-model="addFormData.messageContent" placeholder="请输入消息内容" type="textarea" :rows="4" autocomplete="off" /> </el-form-item> <el-form-item label="提醒级别" prop="sysReminderLevel"> <el-radio-group v-model="addFormData.sysReminderLevel"> <el-radio :label="1">一般</el-radio> <el-radio :label="2">紧急</el-radio> <el-radio :label="3">非常紧急</el-radio> </el-radio-group> </el-form-item> <el-form-item label="跳转方式" prop="messageType"> <el-radio-group v-model="addFormData.messageType"> <el-radio :label="1">文本</el-radio> <el-radio :label="2">href跳转</el-radio> <el-radio :label="3">路由跳转</el-radio> </el-radio-group> </el-form-item> <el-form-item v-if="addFormData.messageType == 2" label="href地址" prop="hrefPath"> <el-input v-model="addFormData.hrefPath" placeholder="例如：/#/prodedu/works-library?mt=0&pt=0" autocomplete="off" /> </el-form-item> <el-form-item v-if="addFormData.messageType == 3" label="路由地址" prop="routerPath"> <el-input v-model="addFormData.routerPath" placeholder="例如：/user/index/myposition" autocomplete="off" /> </el-form-item> <el-form-item> <el-button type="primary" class="formButtonRight" @click="sendMesssageToStudents">确定</el-button> </el-form-item> </el-form> </div> </template> <script> export default { // 组件名字 name: 'VideoItem', // 组件参数 props: { percentage: { type: Number, default: 0 }, title: { type: String, default: '' }, }, data() { var validateRouterPath = (rule, value, callback) => { if (this.addFormData.messageType === 3) { if (value === '') { callback(new Error('路由跳转地址不能为空')) } } callback() } var validateHrefPath = (rule, value, callback) => { if (this.addFormData.messageType === 2) { if (value === '') { callback(new Error('href跳转地址不能为空')) } } callback() } return { courseID: '', labId: '', chapter: {}, addFormData: { messageContent: '', messageType: 1, hrefPath: '', routerPath: '', ignoreTeachers: [], choiseTeachers: [], ignoreStudents: [], choiseStudents: [], sysReminderLevel: 2 }, sendMesssageToStudentsRules: { messageContent: [{ required: true, message: '消息内容不能为空！', trigger: 'blur' }], choiseStudents: [ { required: true, message: '请选择学生', trigger: 'change' } ], routerPath: [ { validator: validateRouterPath, trigger: 'blur' } ], hrefPath: [ { validator: validateHrefPath, trigger: 'blur' } ] }, } }, mounted() { }, // 组件方法 methods: { sendMesssageToStudents() { } } } </script> <style scoped="scoped" lang="scss"></style> ```