vue element ui - form表单布局-两列

说明

关键代码

<el-row>
    <el-col :span="12">
        <el-form-item label="姓名" prop="name">
            <el-input v-model="form_data.name" placeholder="姓名"></el-input>
        </el-form-item>
    </el-col>
    <el-col :span="12">
        <el-form-item label="性别">
            <el-radio v-model="form_data.gender" :label="0">女</el-radio>
            <el-radio v-model="form_data.gender" :label="1">男</el-radio>
        </el-form-item>
    </el-col>
</el-row>

完整代码

<!-- 添加/修改对话框 -->
<el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="60%" @close="cureDialogClosed" :close-on-click-modal="false">
    <el-form ref="form" :model="form_data" label-width="120px" :rules="rules">
        <el-row>
        <el-col :span="12">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="form_data.name" placeholder="姓名"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="性别">
                <el-radio v-model="form_data.gender" :label="0">女</el-radio>
                <el-radio v-model="form_data.gender" :label="1">男</el-radio>
            </el-form-item>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
            <el-form-item label="身份证号" prop="idcard">
                <el-input v-model="form_data.idcard" placeholder="身份证号"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="年龄">
                <el-input-number v-model="form_data.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="电话号码" prop="phoneNum">
                <el-input v-model="form_data.phoneNum" placeholder="电话号码"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="接触来源">
                <el-input v-model="form_data.source" placeholder="感染来源"></el-input>
            </el-form-item>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
            <el-form-item label="隔离地址">
                <el-input v-model="form_data.isolationAddr" placeholder="隔离地址"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="隔离开始时间">
                <el-date-picker type="date" placeholder="住院时间" v-model="form_data.isolationDate" value-format="yyyy-MM-dd" ></el-date-picker>
            </el-form-item>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
            <el-form-item label="住址">
                <el-input v-model="form_data.address" placeholder="住址"></el-input>
            </el-form-item>
        </el-col>
    </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="ok">确 定</el-button>
    </div>
</el-dialog>

原文出处:https://malaoshi.top/show_1IX45wTQ3l30.html