说明

需要在 <el-form> 表单中，用 <el-row> 和 <el-col> 布局

效果如下图：

代码

<template>
    <div>
        <h1>添加患者</h1>
        <el-form ref="form" label-width="80px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="姓名">
                        <el-input v-model="name" placeholder="姓名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="性别">
                        <el-radio v-model="sex" label="0">女</el-radio>
                        <el-radio v-model="sex" label="1">男</el-radio>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="身份证号">
                        <el-input v-model="idcard" placeholder="身份证号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年龄">
                        <el-input-number v-model="age" :min="1" :max="120" label="年龄"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="电话号码">
                        <el-input v-model="phoneNum" placeholder="电话号码"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="住院时间">
                        <el-col :span="4">
                        <el-date-picker type="date" placeholder="住院时间" v-model="hospitalDate" style="width: 100%;" value-format="yyyy-MM-dd" ></el-date-picker>
                        </el-col>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="治疗医院">
                        <el-input v-model="hospital" placeholder="治疗医院"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="是否重症">
                        <el-radio v-model="is_severe" label="0">否</el-radio>
                        <el-radio v-model="is_severe" label="1">是</el-radio>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="感染来源">
                        <el-input v-model="source" placeholder="感染来源"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="症状">
                        <el-input v-model="symptom" placeholder="症状"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="住址">
                            <el-input v-model="address" placeholder="住址"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="remarks" rows="4" maxlength="200" show-word-limit></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item>
                <el-button type="primary" @click="doSubmit">提交</el-button>
                <el-button>取消</el-button>
                <div style="color:red;">{{msg}}</div>
            </el-form-item>
            </el-form>


    </div>
</template>
<script>
import request from '@/utils/request'
import store from '@/store'

export default {
    data: function(){

        return { //是vue的配置，表示数据
            name:"",
            idcard:"",
            sex:"",
            address:"",
            age:undefined,
            phoneNum:"",
            source:"",
            hospitalDate:undefined,
            symptom:"",
            hospital:"",
            is_severe:0,
            remarks:"",
            msg:""
        }
    }
    ,
    methods:{
        doSubmit:function(){
            //显示loading
            const loading = this.$loading({
                lock: true,
                text: '请稍等...',
                spinner: 'el-icon-loading'
            });
            //调用axios发请求，需要通过post方法
            //axios中，通过post传参数，需要通过下面对象


            request({
                url: '/leave/add',
                method: 'post'
            }).then(res => {
                console.log(res);
                if(res.code===0){
                    this.$message({
                        showClose: true,
                        message: '添加成功！',
                        type: 'success'
                    });
                    this.$router.push("/leave2/list2")
                }else{
                    this.$message({
                        showClose: true,
                        message: res.msg,
                        type: 'error'
                    });
                }
                loading.close() // 关闭loading
              })
              .catch(function (error) {// 请求失败处理
                console.log(error);
                loading.close() // 关闭loading
              });
        }
    }
}
</script>

原文出处：/show_1IX33IIDftiy.html