ElementUI的el-form怎樣格式化布局

場景

如果使用el-form默認的布局代碼如下：

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="密碼" prop="pass">
    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="確認密碼" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="年齡" prop="age">
    <el-input v-model.number="ruleForm.age"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>

這樣生成的頁面布局是一行一行的。

如果想要在一行中顯示兩個input怎樣實現。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

可以通過el-row和el-col來實現。

類似於表格的行和列，通過設置多少行 一行中有多少列來實現。

布局實現舉例：

 

     <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col span="10">

          </el-col>
          <el-col span="10">
 
          </el-col>
        </el-row>

        <el-row>
          <el-col span="10">

          </el-col>
          <el-col span="10">
 
          </el-col>
        </el-row>

        <el-row>
          <el-col span="10">

          </el-col>
          <el-col span="10">

          </el-col>
        </el-row>


</el-form>

 

示例代碼：

      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col span="10">
            <el-form-item label="班次編號:" prop="bcbh">
              <el-input v-model="form.bcbh" placeholder="請輸入班次編號" />
            </el-form-item>
          </el-col>
          <el-col span="10">
            <el-form-item label="班次名稱:" prop="bcmc" label-width="100px">
              <el-input v-model="form.bcmc" placeholder="請輸入班次名稱" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="10">
            <el-form-item label="班次類型:" prop="bclx">
              <el-select v-model="form.bclx" placeholder="請選擇班次類型" clearable>
                <el-option
                  v-for="dict in bclxOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col span="10">
            <el-form-item label="是否跨天:" prop="sfkt">
              <!-- `checked` 為 true 或 false -->
              <el-checkbox v-model="form.sfkt" ></el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="10">
            <el-form-item label="小時數:" prop="xss">
              <el-input v-model="form.xss" placeholder="請輸入小時數" type="num" />
            </el-form-item>
          </el-col>
          <el-col span="10">
            <el-form-item label="是否夜班:" prop="sfyb">
              <!-- `checked` 為 true 或 false -->
              <el-checkbox v-model="form.sfyb"></el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="班中餐:" prop="bzc" span="10">
          <el-input v-model="form.bzc" placeholder="請輸入班中餐" />
        </el-form-item>
        <el-form-item label="備注:" prop="bz">
          <el-input v-model="form.bz" placeholder="請輸入備注" />
        </el-form-item>
</el-form>

 

效果