el-form的label和el-input不在同一行
·
背景
太久没用原生的elementUI,遗忘故记录
问题一:单个el-input和el-form-item的label在同一行
方法一:给el-form-item设置label-width
<el-form model="form" :rules="rules" class="form_class">
<el-form-item label="公文编号:" label-width="100px">
<el-input placeholder="公文编号"></el-input>
</el-form-item>
</el-form>
方法二:el-input外面套一层el-col,并且设置宽度
<el-form model="form" :rules="rules" class="form_class" >
<el-form-item label="公文编号">
<el-col :span="21">
<el-input style="width:100%"></el-input>
</el-col>
</el-form-item>
</el-form>
问题二:一行多个el-form-item和el-input
在el-form-item外面套el-col在设置label-width或者el-input的width宽度
<el-row>
<el-col :span="12">
<el-form-item label="公文编号:" label-width="100px">
<el-input placeholder="公文编号"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="公文编号:" label-width="100px">
<el-input placeholder="公文编号"></el-input>
</el-form-item>
</el-col>
</el-row>
或者:
<el-row>
<el-col :span="12">
<el-form-item label="公文编号:">
<el-input placeholder="公文编号" style="width: 80%"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="公文编号:">
<el-input placeholder="公文编号" style="width: 80%"></el-input>
</el-form-item>
</el-col>
</el-row>
更多推荐
已为社区贡献2条内容
所有评论(0)