效果图:

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标签的更多相关文章

  1. Form表单中的action路径问题,form表单action路径《jsp--->Servlet路劲问题》这个和上一个《jsp--->Servlet》文章有关

    Form表单中的action路径问题,form表单action路径 热度5 评论 50 www.BkJia.Com  网友分享于:  2014-08-14 08:08:01     浏览数44525次 ...

  2. Form表单中的action提交路径问题

    Form表单中的action提交路径问题 Form表单action属性和method属性的一些问题: 我遇到的是Form表单提交到servelet处理时遇到的问题:(1)<form name=& ...

  3. javascript将form表单中的元素值封装成json格式

    把form表单中的元素值封装成json function toJSON(form)//form是要进行封装的form表单对象,dom对象,可以通过document.mainForm获得,mainFor ...

  4. form表单中的id 与name的区别

    以前经常写form表单时,不写id和name,总觉得没有什么用.后来一看后台套完的页面发现,他们都补上name,不知道所以然,就查了一下资料,吓我一跳,要是照我那样写根本不会有数据传到服务器.原来表单 ...

  5. bootstrap中模态框如果放入form表单中会存在的问题

    bootstrap中模态框如果放入form表单中会存在的问题:当模态框显示时,点回车会出现表单自动提交!!!所以在使用模态框的时候要特别注意!

  6. form表单中id与name的区别

    以前经常写form表单时,不写id和name,总觉得没有什么用.后来一看后台套完的页面发现,他们都补上name,不知道所以然,就查了一下资料,吓我一跳,要是照我那样写根本不会有数据传到服务器.原来表单 ...

  7. jQuery中设置form表单中action的值的方法

    下面介绍在jQuery中设置form表单中action的值的方法. $("#myFormId").attr("action", "userinfo.s ...

  8. jQuery中设置form表单中action值与js有什么不同。。。。

    jQuery中设置form表单中action值与js有什么不同.... HTML代码如下: <form action="" method="post" i ...

  9. jsp中的form表单中的 id和name有什么区别了

    <form action="./system/WebServer_webServerLogin" method="post" id="login ...

随机推荐

  1. Linux下批量修改文件名(rename)

    原文地址: http://blog.csdn.net/sea_shore/article/details/6102437 1.rename命令批量修改文件名, 其实linux下可以使用别的办法来批量修 ...

  2. RxJava2 源码解析(二)

    概述 承接上一篇RxJava2 源码解析(一),本系列我们的目的: 知道源头(Observable)是如何将数据发送出去的.    知道终点(Observer)是如何接收到数据的.    何时将源头和 ...

  3. Java SPI机制学习笔记

    最近在阅读框架源代码时,常常看到 SPI 的子包, 忍不住查了下: Service Provider Interface : 服务提供接口. JavaSPI 实际上是“基于接口的编程+策略模式+配置文 ...

  4. iOS:使用NSRegularExpression正则去掉一串字符串中所有的特殊字符和标点

    一.介绍 在开发中,有时我们需要对一串字符串做特殊的处理后再使用,例如判断是不是特殊字符.去掉所有的特殊字符等.做处理的方法有很多,最简单的就是for循环遍历一个个的比较处理,最好用的应该是使用正则表 ...

  5. windows命令行下杀死进程的方法

    xp和win7下有两个好东东tasklist和tskill.tasklist能列出所有的进程,和相应的信息.tskill能查杀进程,语法很简单:tskill程序名!或者是tskill 进程id 例如: ...

  6. 1.1 lambda表达式

    一.处理匿名内部类 1.Runnable接口 new Thread(new Runnable() { public void run() { System.out.println("hell ...

  7. 关于#progma comment 中库文件相对路径问题

    最近做一个验证程序的对话框编程,因为里面要要用到静态链接库,所以就稍微的学习了下静态链接库知识,学习的过程中感觉到了自己所了解的东西实在是少的可怜,更加坚定了自己要更加上进的决心,要把以前所丢掉的都给 ...

  8. linux-批量杀死进程

    kill `ps -ef|grep 进程名 | grep -v grep|awk '{print $2}'` 例如: kill `ps -ef | grep /etc/pam.d/su |grep - ...

  9. linux centos 7上运行teamviewer与找不到ID问题处理办法

    以前在raspberryPi上搞过teamviewer,现在用了CentOS服务器,搞了一个vpn,访问还有点问题,时间紧张,就先给teamviewer. 而centos7 上安装也比较简单,几条命令 ...

  10. 树莓派3中编译Opencv3.4.10

    一.命令 -dev libv4l-dev libavcodec-dev libavformat-dev libswscale-dev cd wget http://sourceforge.net/pr ...