脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue放置多个el-form-item

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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue3结合TypeScript项目开发实战记录

    Vue3结合TypeScript项目开发实战记录

    听说有的公司已经开始用vue3了 赶紧打开B站学一下,下面这篇文章主要给大家介绍了关于Vue3结合TypeScript项目开发实战的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-09-09
  • Vue中Class和Style实现v-bind绑定的几种用法

    Vue中Class和Style实现v-bind绑定的几种用法

    项目开发中给元素添加/删除 class 是非常常见的行为之一， 例如网站导航都会给选中项添加一个 active 类用来区别选与未选中的样式，那么在 vue 中 我们如何处理这类的效果呢？下面我们就一起来了解一下
    2021-05-05
  • Vue样式绑定的几种实现方式

    Vue样式绑定的几种实现方式

    这篇文章主要介绍了Vue样式绑定的几种实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue权限管理系统的实现代码

    vue权限管理系统的实现代码

    这篇文章主要介绍了vue权限管理系统的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解

    vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解

    这篇文章主要介绍了vue-cli项目中使用公用的提示弹层tips或加载loading组件,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2018-05-05
  • 关于Vue3过渡动画的踩坑记录

    关于Vue3过渡动画的踩坑记录

    在开发中我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验,下面这篇文章主要给大家介绍了关于Vue3过渡动画踩坑的相关资料,需要的朋友可以参考下
    2021-12-12
  • 关于vue项目proxyTable配置和部署服务器的问题

    关于vue项目proxyTable配置和部署服务器的问题

    这篇文章主要介绍了关于vue项目proxyTable配置和部署服务器的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • Vue前端生成UUID的方法详解

    Vue前端生成UUID的方法详解

    这篇文章主要给大家介绍了关于Vue前端生成UUID的相关资料,前端需要生成一个唯一标识符作为ID时,可以使用Vue UUID插件,比如生成订单号、用户ID等等,需要的朋友可以参考下
    2023-09-09
  • 前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验方法例子

    前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验方法例子

    当我们在开发应用时经常需要对表单进行校验,以确保用户输入的数据符合预期,这篇文章主要给大家介绍了关于前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验方法的相关资料,需要的朋友可以参考下
    2023-12-12
  • vuejs 动态添加input框的实例讲解

    vuejs 动态添加input框的实例讲解

    今天小编就为大家分享一篇vuejs 动态添加input框的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08

最新评论