element-ui表单布局

Posted 2023-03-08

参考技术A 一、表单布局

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