vue el-form一行里面放置多个el-form-item的实现

更新时间：2022年08月12日 10:06:47 作者：＊且听风吟

本文主要介绍了vue el-form一行里面放置多个el-form-item的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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

其实很简单，用 layout 布局就可以简单实现。

layout 布局是通过基础的24分栏，从而迅速简洁地创建布局。

代码实现如下：

<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的实现的文章就介绍到这了,更多相关vue放置多个el-form-item内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Windows系统下使用nginx部署vue2项目的全过程
nginx是一个高性能的HTTP和反向代理服务器,因此常用来做静态资源服务器和后端的反向代理服务器,下面这篇文章主要给大家介绍了关于Windows系统下使用nginx部署vue2项目的相关资料,需要的朋友可以参考下
2023-03-03
vue项目中echarts自适应问题的高级解决过程
虽然老早就看过很多echarts的例子,但自己接触的项目中一直都没有真正用到过,直到最近才开始真正使用,下面这篇文章主要给大家介绍了关于vue项目中echarts自适应问题的高级解决过程,需要的朋友可以参考下
2023-05-05
vue-cli创建项目时由esLint校验导致报错或警告的问题及解决
这篇文章主要介绍了vue-cli创建项目时由esLint校验导致报错或警告的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
移动端调试神器vConsole使用详解
vConsole 是框架无关的，可以在 Vue、React 或其他任何框架中使用，今天通过本文给大家介绍移动端调试神器vConsole使用，感兴趣的朋友一起看看吧
2022-04-04
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
今天小编就为大家分享一篇vue利用v-for嵌套输出多层对象,分别输出到个表的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue输入节流,避免实时请求接口的实例代码
今天小编就为大家分享一篇vue输入节流,避免实时请求接口的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
vue实现绑定事件的方法实例代码详解
这篇文章主要介绍了vue实现绑定事件的方法实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-06-06
Vue eventBus事件总线封装后再用的方式
EventBus称为事件总线,当两个组件属于不同的两个组件分支,或者两个组件没有任何联系的时候,不想使用Vuex这样的库来进行数据通信,就可以通过事件总线来进行通信,这篇文章主要给大家介绍了关于Vue eventBus事件总线封装后再用的相关资料,需要的朋友可以参考下
2022-06-06
如何使用yarn创建vite项目+vue3
这篇文章主要介绍了如何使用yarn创建vite项目+vue3,详细介绍了使用vite创建vue3过程,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-03-03
如何去除vue项目中的#及其ie9兼容性
本篇文章主要介绍了如何去除vue项目中的#及其ie9兼容性，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01