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項目的全過程
nginx是一個高性能的HTTP和反向代理服務(wù)器,因此常用來做靜態(tài)資源服務(wù)器和后端的反向代理服務(wù)器,下面這篇文章主要給大家介紹了關(guān)于Windows系統(tǒng)下使用nginx部署vue2項目的相關(guān)資料,需要的朋友可以參考下2023-03-03vue項目中echarts自適應(yīng)問題的高級解決過程
雖然老早就看過很多echarts的例子,但自己接觸的項目中一直都沒有真正用到過,直到最近才開始真正使用,下面這篇文章主要給大家介紹了關(guān)于vue項目中echarts自適應(yīng)問題的高級解決過程,需要的朋友可以參考下2023-05-05vue-cli創(chuàng)建項目時由esLint校驗導致報錯或警告的問題及解決
這篇文章主要介紹了vue-cli創(chuàng)建項目時由esLint校驗導致報錯或警告的問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-05-05