一、表单布局
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> -->
网友评论