Recently I used element-ui's el-form, which requires multiple el-form-items to be placed in one line.
In fact, it is very simple. It can be easily implemented using layout.
layout Layout is based on 24 columns, allowing you to create layouts quickly and concisely.
The code is implemented as follows:
<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>
The page effect is as follows:
