从0开始做毕设：若依RuoYi-Vue对话框表单样式修改

实现效果

调整字段显示为一行，将输入框调整为两栏

 原代码：

 修改后代码：

<!-- 添加或修改预约时间对话框 -->
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
            <el-col :span="12">
                <el-form-item label="预约时段" prop="timeReservation">
                    <el-input v-model="form.timeReservation" placeholder="请输入预约时段"/>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="签到时间范围" prop="timeSignin">
                    <el-input v-model="form.timeSignin" placeholder="请输入签到时间范围"/>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="暂离时间范围" prop="timeLeave">
                    <el-input v-model="form.timeLeave" placeholder="请输入暂离时间范围"/>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="预约日期" prop="timeDay">
                    <el-input v-model="form.timeDay" placeholder="请输入预约日期"/>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
    </div>
</el-dialog>

 主要参考：

组件 | Element

一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

组件 | Dialog 对话框

在保留当前页面状态的情况下，告知用户并承载相关操作。

组件 | Form 表单

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据

(1条消息) Element 布局组件el-row和el-col 详解_purple.taro的博客-CSDN博客