问:
el-form中五个el-form-item,我现在希望其中三个在一行中显示,另外两个分别一行
回答:
如果你使用 Element UI 中的 el-form 和 el-form-item,并希望其中三个在一行显示,另外两个分别占据一行,可以通过设置不同的栅格布局来实现。以下是示例代码:
<el-row>
<el-col :span="8">
<!-- 频道 ?-->
<el-form-item
prop="channelId"
label="频道"
:rules="{
required: true, message: '频道不能为空', trigger: 'change'
}"
>
<el-select
v-model="addDataForm.channelId"
placeholder="必选"
v-if="this.addDataForm.channelId == 1 && this.addDataForm.channelId == 2"
disabled
>
</el-select>
<el-select
v-model="addDataForm.channelId"
placeholder="必选"
>
<!-- v-if="this.addDataForm.channelId == " -->
<el-option label="频道页" :value="2"></el-option>
<el-option label="文章页" :value="3"></el-option>
<el-option label="视频播放器" :value="4"></el-option>
<el-option label="音频播放器" :value="5"></el-option>
<el-option label="专题页" :value="6"></el-option>
<el-option label="数据通" :value="7"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<!-- 栏目 ?-->
<el-form-item
prop="categoryId"
label="栏目"
:rules="{
required: true, message: '栏目不能为空', trigger: 'change'
}"
>
<!-- style="margin-left: 20px;" -->
<el-select
v-model="addDataForm.categoryId"
placeholder="必选"
>
<!-- v-if="this.addDataForm.categoryId == 2" -->
<el-option label="频道页" :value="2"></el-option>
<el-option label="文章页" :value="3"></el-option>
<el-option label="视频播放器" :value="4"></el-option>
<el-option label="音频播放器" :value="5"></el-option>
<el-option label="专题页" :value="6"></el-option>
<el-option label="数据通" :value="7"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
prop="topicId"
label="专题"
:rules="{
required: true, message: '专题不能为空', trigger: 'change'
}"
>
<el-autocomplete
v-model="state"
:fetch-suggestions="querySearchAsync"
placeholder="请输入专题"
@select="handleSelect"
></el-autocomplete>
</el-form-item>
</el-col>
</el-row>
上述将三个下拉框单独摘出来,用el-row和el-col包括,这样就可以实现了,