Element UI Form 每行顯示多列，即多個 el-form-item

Element UI Form組件使用問題。每個 el-form-item 都會獨占一行。對于輸入項很多的管理app，能否在每個form中，每行顯示 2 個 el-form-item ?

<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活動名稱">

<el-input v-model="form.name"></el-input>

</el-form-item>
</el-form>

回答

編輯回答

放開她

<el-col :span="12">

<el-form-item label="客戶名稱：">
    <el-input  v-model="form.customerName"></el-input>
</el-form-item>

</el-col>
<el-col :span="12">

<el-form-item label="客戶簡稱：">
    <el-input v-model="form.customerShortName"></el-input>
</el-form-item>

</el-col>

將span設(shè)置成12就可以了，效果如圖

2018年3月24日 10:52

編輯回答

拽很帥

1.inline可以設(shè)置行內(nèi)表單模式！具體看文檔講解很詳細(xì)
2.使用el-row el-col去分割

2018年4月20日 10:16

編輯回答

你的瞳

與inline無關(guān)。
自己用css實現(xiàn)了：

  <el-form ref="form" :model="bean" label-suffix="" label-width="170px" label-position="left" >
    <div class="form">
    <div class="form-right">
       <el-form-item label="AAAAAAAA1" class="item" >
         <el-input v-model="bean.a1"></el-input>
       </el-form-item>
       <el-form-item label="AAAAAAAA2" class="item" >
         <el-input v-model="bean.a2"></el-input>
       </el-form-item>
       <el-form-item label="AAAAAAAA3" class="item" >
         <el-input v-model="bean.a3"></el-input>
       </el-form-item>
     </div>
    <div class="form-right">
       <el-form-item label="BBBBBBB1" class="item" >
         <el-input v-model="bean.b1"></el-input>
       </el-form-item>
       <el-form-item label="BBBBBBB2" class="item">
         <el-input v-model="bean.b2"></el-input>
       </el-form-item>
      <el-form-item label="BBBBBBB3" class="item">
         <el-input v-model="bean.b3"></el-input>
       </el-form-item>
     </div>
    </div>
  </el-form>
  
 <style>
     .form .form-left {
    width:50%; padding-left:1rem; padding-right:1rem; padding-top:1rem;
  }
  .form .form-right {
    width:50%; padding-left:1rem; padding-right:1rem; padding-top:1rem;
  }
 </style>

2018年1月2日 04:33

編輯回答

瘋子范

應(yīng)該可以這樣子用吧？<el-col :span="12">

     <el-form-item label="AAAAAAAA1" class="item" >
         <el-input v-model="bean.a1"></el-input>
     </el-form-item>
     <el-form-item label="AAAAAAAA2" class="item" >
         <el-input v-model="bean.a2"></el-input>
     </el-form-item>
     <el-form-item label="AAAAAAAA3" class="item" >
         <el-input v-model="bean.a3"></el-input>
     </el-form-item>
   </el-col>
    <el-col :span="12">
        <el-form-item label="AAAAAAAA1" class="item" >
         <el-input v-model="bean.a1"></el-input>
     </el-form-item>
     <el-form-item label="AAAAAAAA2" class="item" >
         <el-input v-model="bean.a2"></el-input>
     </el-form-item>
     <el-form-item label="AAAAAAAA3" class="item" >
         <el-input v-model="bean.a3"></el-input>
     </el-form-item>
    </el-col>

2018年6月2日 12:02

編輯回答

乖乖瀦

<el-row type="flex" class="row-bg">
            <el-col :span="12">
                <el-form-item label="簽約企業(yè)名稱" prop="ep_name">
                    <el-input style="width:16em" v-model="ruleForm.ep_name"></el-input>
                </el-form-item>
            </el-col>
                <el-form-item label="簽約企業(yè)簡稱" prop="ep_abbreviation">
                    <el-input style="width:16em" v-model="ruleForm.ep_abbreviation"></el-input>
                </el-form-item>
            </el-row>

圖片描述

2017年1月30日 16:57