vue el-form一行里面放置多個el-form-item的實現(xiàn)
最近用到 element-ui 的 el-form,要求一行里面放置多個 el-form-item。
其實很簡單,用 layout 布局就可以簡單實現(xiàn)。
layout 布局是通過基礎的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>
頁面效果如下:

到此這篇關于vue el-form一行里面放置多個el-form-item的實現(xiàn)的文章就介紹到這了,更多相關vue放置多個el-form-item內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Windows系統(tǒng)下使用nginx部署vue2項目的全過程
nginx是一個高性能的HTTP和反向代理服務器,因此常用來做靜態(tài)資源服務器和后端的反向代理服務器,下面這篇文章主要給大家介紹了關于Windows系統(tǒng)下使用nginx部署vue2項目的相關資料,需要的朋友可以參考下2023-03-03
vue-cli創(chuàng)建項目時由esLint校驗導致報錯或警告的問題及解決
這篇文章主要介紹了vue-cli創(chuàng)建項目時由esLint校驗導致報錯或警告的問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-05-05

