欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue el-form一行里面放置多個(gè)el-form-item的實(shí)現(xiàn)

 更新時(shí)間：2022年08月12日 10:06:47   作者：＊且聽(tīng)風(fēng)吟  
本文主要介紹了vue el-form一行里面放置多個(gè)el-form-item的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

最近用到 element-ui 的 el-form，要求一行里面放置多個(gè) el-form-item。

其實(shí)很簡(jiǎn)單，用 layout 布局就可以簡(jiǎn)單實(shí)現(xiàn)。

layout 布局是通過(guò)基礎(chǔ)的24分欄，從而迅速簡(jiǎn)潔地創(chuàng)建布局。

代碼實(shí)現(xiàn)如下：

<el-form size="mini"
         label-width="160px"
         label-position="right"
         :model="formData"
         :ref="FormName"
         :rules="rules">
      <el-row>
        <el-col :span="12">
          <el-form-item prop="sbbh"
                        :label="$t('deviceManage.device.table.sbbh')+':'">
            <el-input v-model="formData.sbbh"
                      :placeholder="$t('deviceManage.device.dlg.sbbh')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="name"
                        :label="$t('deviceManage.device.table.name')+':'">
            <el-input v-model="formData.name"
                      :placeholder="$t('deviceManage.device.dlg.name')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="deptId"
                        :label="$t('deviceManage.device.table.deptId')+':'">
            <treeselect :options="deptTree"
                        :normalizer="normalizer"
                        v-model="formData.deptId"
                        :placeholder="$t('deviceManage.device.dlg.deptId')">
            </treeselect>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="staffId"
                        :label="$t('deviceManage.device.table.staffId')+':'">
            <el-select v-model="formData.staffId"
                       :placeholder="$t('deviceManage.device.dlg.staffId')">
              <el-option v-for="(item,i) in staffOption"
                         :key="i"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
</el-form>

頁(yè)面效果如下：

 到此這篇關(guān)于vue el-form一行里面放置多個(gè)el-form-item的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue放置多個(gè)el-form-item內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論