效果图:

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. AngularJS中获取数据源的几种方式

    在AngularJS中,可以从$rootScope中获取数据源,也可以把获取数据的逻辑封装在service中,然后注入到app.run函数中,或者注入到controller中.本篇就来整理获取数据的几 ...

  2. Scala:Next Steps in Scala

    Array val greetStrings = new Array[String](3) greetStrings(0) = "Hello" greetStrings(1) = ...

  3. MUI DtPicker 显示自定义日期

    MUI地址:http://dev.dcloud.net.cn/mui/ 首先引入相关JS CSS脚本. HTML代码: <input class="dt flat" styl ...

  4. .ipynb文件转.py文件

    到要转的demo.ipynb所在目录下,然后输入命令: jupyter nbconvert --to script demo.ipynb

  5. Go语言之高级篇beego框架之Controller

    一.Controller 控制器 Controller等同于Django里的view,处理逻辑都是在Controller里面完成的,下面就写一个最简单的Controller.写controller的时 ...

  6. js-变量定义关键字const,var,let

    1.var定义的变量可以修改,如果不初始化会输出undefined,不会报错. js中最常用的关键字:基本大多数据学js时都只看到使用过var.从没相关还有其他定义 var a = 1; // var ...

  7. Cancel-Based Recovery

    http://www.toadworld.com/platforms/oracle/w/wiki/1010.cancel-based-recovery.aspx Cancel-Based recove ...

  8. 将cmd中命令输出保存为TXT文本文件

    转自:https://www.cnblogs.com/hongten/archive/2013/03/27/hongten_windows_cms.html 例如:将Ping命令的加长包输出到D盘的p ...

  9. (转)超过 130 个你需要了解的 vim 命令

    从 1970 年开始,vi 和 vim 就成为了程序员最喜爱的文本编辑器之一.5 年前,我写了一个问自己名为 “每个程序员都应该知道的 100 个 vim 命令” 这次算是之前那篇文章的改进版,希望你 ...

  10. android下使用tcpdump抓包

    tcpdump是linux下的抓包工具,在android中没有,需要下载对应的工具. 下载地址:https://www.androidtcpdump.com/android-tcpdump/downl ...