element-ui表单布局

一、表单布局

1.固定label-width 

2.item-content 设为100%  结合elment的 el-row 和el-col 


            <el-row :gutter="20">

                <!-- <el-col :span="8">

                    <el-form-item label="学校:">

                        <el-input placeholder="" v-model="investMerchandiseBo.transactionNumber" size="small"></el-input>

                    </el-form-item>

                </el-col> -->

                <el-col :span="8">

                    <el-form-item label="班级:">

                        <el-input placeholder="" v-model="investMerchandiseBo.transFrom" size="small" clearable></el-input>

                    </el-form-item>

                </el-col>

                <el-col :span="8">

                    <el-form-item label="专业:">

                        <el-input placeholder="" v-model="investMerchandiseBo.transAmount" size="small" clearable></el-input>

                    </el-form-item>

                </el-col>

                <el-col :span="8">

                    <el-form-item label="成绩:">

                        <div>

                            <el-radio v-model="investMerchandiseBo.isTrans" label="1">是</el-radio>

                            <el-radio v-model="investMerchandiseBo.isTrans" label="0">否</el-radio>

                        </div>

                    </el-form-item>

                </el-col>

            </el-row>


二、详情展示布局

    <el-row class="mb-6  pl-10">

            <el-col :sm="12" :md="6">

                <span>学校:</span>

                <span>{{ investMerchandiseBo.merchandiseProjectName || '--' }}</span>

            </el-col>

            <el-col :sm="12" :md="6">

                <span>班级:</span>

                <span>{{ investMerchandiseBo.datePayment }}</span>

            </el-col>

            <el-col :sm="12" :md="6">

                <span>专业:</span>

                <span>{{ investMerchandiseBo.dateExpires || '--' }}</span>

            </el-col>

            <el-col :sm="12" :md="6">

                <span>名字:</span>

                <span>{{ investMerchandiseBo.settlementDay }}</span>

            </el-col>

        </el-row>


           <!-- <el-col :span="12">

                    <el-form-item label="到期时间:">

                        <el-row>

                            <el-col :span="11">

                                <p-wit-date-picker

                                    type="date"

                                    v-model="interestBo.dateExpiresStartDate"

                                    :datePickerConfig="datePickerConfig02"

                                    :dateOptionsConfig="datePickerConfig02"

                                >

                                </p-wit-date-picker>

                            </el-col>

                            <el-col :span="2" style="text-align: center;">

                                至

                            </el-col>

                            <el-col :span="11">

                                <p-wit-date-picker

                                    type="date"

                                    v-model="interestBo.dateExpiresEndDate"

                                    :datePickerConfig="datePickerConfig02"

                                    :dateOptionsConfig="datePickerConfig02"

                                >

                                </p-wit-date-picker>

                            </el-col>

                        </el-row>

                    </el-form-item>

                </el-col> -->

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容