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

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

 更新時間:2022年08月12日 10:06:47   作者:*且聽風吟  
本文主要介紹了vue el-form一行里面放置多個el-form-item的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

最近用到 element-ui 的 el-form,要求一行里面放置多個 el-form-item。

其實很簡單,用 layout 布局就可以簡單實現(xiàn)。

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

代碼實現(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>

頁面效果如下:

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

相關(guān)文章

  • Windows系統(tǒng)下使用nginx部署vue2項目的全過程

    Windows系統(tǒng)下使用nginx部署vue2項目的全過程

    nginx是一個高性能的HTTP和反向代理服務(wù)器,因此常用來做靜態(tài)資源服務(wù)器和后端的反向代理服務(wù)器,下面這篇文章主要給大家介紹了關(guān)于Windows系統(tǒng)下使用nginx部署vue2項目的相關(guān)資料,需要的朋友可以參考下
    2023-03-03
  • vue項目中echarts自適應(yīng)問題的高級解決過程

    vue項目中echarts自適應(yīng)問題的高級解決過程

    雖然老早就看過很多echarts的例子,但自己接觸的項目中一直都沒有真正用到過,直到最近才開始真正使用,下面這篇文章主要給大家介紹了關(guān)于vue項目中echarts自適應(yīng)問題的高級解決過程,需要的朋友可以參考下
    2023-05-05
  • vue-cli創(chuàng)建項目時由esLint校驗導致報錯或警告的問題及解決

    vue-cli創(chuàng)建項目時由esLint校驗導致報錯或警告的問題及解決

    這篇文章主要介紹了vue-cli創(chuàng)建項目時由esLint校驗導致報錯或警告的問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • 移動端調(diào)試神器vConsole使用詳解

    移動端調(diào)試神器vConsole使用詳解

    vConsole?是框架無關(guān)的,可以在?Vue、React?或其他任何框架中使用,今天通過本文給大家介紹移動端調(diào)試神器vConsole使用,感興趣的朋友一起看看吧
    2022-04-04
  • vue利用v-for嵌套輸出多層對象,分別輸出到個表的方法

    vue利用v-for嵌套輸出多層對象,分別輸出到個表的方法

    今天小編就為大家分享一篇vue利用v-for嵌套輸出多層對象,分別輸出到個表的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue輸入節(jié)流,避免實時請求接口的實例代碼

    vue輸入節(jié)流,避免實時請求接口的實例代碼

    今天小編就為大家分享一篇vue輸入節(jié)流,避免實時請求接口的實例代碼,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • vue實現(xiàn)綁定事件的方法實例代碼詳解

    vue實現(xiàn)綁定事件的方法實例代碼詳解

    這篇文章主要介紹了vue實現(xiàn)綁定事件的方法實例代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-06-06
  • Vue?eventBus事件總線封裝后再用的方式

    Vue?eventBus事件總線封裝后再用的方式

    EventBus稱為事件總線,當兩個組件屬于不同的兩個組件分支,或者兩個組件沒有任何聯(lián)系的時候,不想使用Vuex這樣的庫來進行數(shù)據(jù)通信,就可以通過事件總線來進行通信,這篇文章主要給大家介紹了關(guān)于Vue?eventBus事件總線封裝后再用的相關(guān)資料,需要的朋友可以參考下
    2022-06-06
  • 如何使用yarn創(chuàng)建vite項目+vue3

    如何使用yarn創(chuàng)建vite項目+vue3

    這篇文章主要介紹了如何使用yarn創(chuàng)建vite項目+vue3,詳細介紹了使用vite創(chuàng)建vue3過程,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
    2024-03-03
  • 如何去除vue項目中的#及其ie9兼容性

    如何去除vue項目中的#及其ie9兼容性

    本篇文章主要介紹了如何去除vue項目中的#及其ie9兼容性,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-01

最新評論