el-form中五个el-form-item,我现在希望其中三个在一行中显示,另外两个分别一行

最新推荐文章于 2025-06-13 16:19:19 发布

原创最新推荐文章于 2025-06-13 16:19:19 发布 · 2.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

文章讲述了如何在ElementUI的el-form组件中，通过设置el-row和el-col的栅格布局，使三个el-form-item在一行显示，其余两个分别显示。涉及到了el-select和el-autocomplete的选择项组织。

问:

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包括,这样就可以实现了,