element的form表单中如何一行显示多el-form-item标签

摘要:
scriptsrc=“//unpkg.com/”element-ui@2.4.3/Lib/index.js“>divide=“app”>model=“form”label width=“80px”>el form itemlabel=“活动区域”>/el option>/el col>el表单itemlabel=”活动名称1“>
效果图:

element的form表单中如何一行显示多el-form-item标签第1张

HTML代码:
    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.4.3/lib/index.js"></script>
    <div id="app">
        <el-form ref="form" :model="form" label-width="80px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="活动名称">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="活动区域">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="活动名称1">
                        <el-input v-model="form.name1"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="活动名称2">
                        <el-input v-model="form.name2"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="活动区域2">
                        <el-select v-model="form.region2" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="活动名称3">
                        <el-input v-model="form.name3"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
Babel + JSX + No-Library (pure JS)代码:
var Main = {
    data() {
      return {
        form: {
          name: '',
          region: '',
          name2: '',
          name3: '',
          region2: '',
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

免责声明:文章转载自《element的form表单中如何一行显示多el-form-item标签》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇LINUX 上 实现SNTP (时间同步)ts变量类型和编译文件tsconfig.json简单配置下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

【ABAP系列】SAP ABAP 的替代和校验

公众号:matinal 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:【ABAP系列】SAP ABAP 的替代和校验   前言部分 大家可以关注我的公众号,公众号里的排版更好,阅读更舒适。 正文部分 以下内容请参考,懒得翻译了 I. Creating, activating...

Delphi 2009 泛型容器单元(Generics.Collections)[2]: TQueue&amp;lt;T&amp;gt;

TQueue 和 TStack, 一个是队列列表, 一个是堆栈列表; 一个是先进先出, 一个是先进后出.TQueue 主要有三个方法、一个属性:Enqueue(入列)、Dequeue(出列)、Peek(查看下一个要出列的元素);Count(元素总数). -----------------------------------------------------...

Linux 内核 hlist 详解

在Linux内核中,hlist(哈希链表)使用非常广泛。本文将对其数据结构和核心函数进行分析。 和hlist相关的数据结构有两个:hlist_head 和 hlist_node //hash桶的头结点struct hlist_head {   struct hlist_node *first;//指向每一个hash桶的第一个结点的指针};//hash桶的...

win10 安装wsl2 centos

win10 powershell(管理员身份)操作 安装choco(windows的包管理工具类似于brew) Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServiceP...

js应用实现博客个性主页布局拖拽功能

Jquery的Interface elements for jQuery里面的拖拽布局存在一些bug,效率也比较低,GoogleUI google_drag.js有些乱,不是很容易理解,Discuz!NT Space代码满天飞,所以自己参考GoogleUI的思想,简化和优化了一些操作代码,实现了博客系统基本的拖拽布局的效果,暂时未考虑其他浏览器的兼容性问题...

[ PyQt入门教程 ] PyQt5基本控件使用:消息弹出、用户输入、文件/目录选择对话框

本文主要介绍PyQt界面实现中常用的消息弹出对话框、提供用户输入的输入框、打开文件获取文件/目录路径的文件对话框。学习这三种控件前,先想一下它们使用的主要场景: 1、消息弹出对话框。程序遇到问题需要退出需要弹出错误提示框 、程序执行可能造成的风险需要弹出警告窗口提示用户是否进一步执行等等。 2、用户输入框。比如常见的让用户选择执行的程序分支、yes/no等...