element ui 表单 表单元素在竖着布局的基础上横向布局横向显示，一行显示多个

效果如下主要是这一排的：

（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>