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

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标签的更多相关文章
- Form表单中的action路径问题,form表单action路径《jsp--->Servlet路劲问题》这个和上一个《jsp--->Servlet》文章有关
Form表单中的action路径问题,form表单action路径 热度5 评论 50 www.BkJia.Com 网友分享于: 2014-08-14 08:08:01 浏览数44525次 ...
- Form表单中的action提交路径问题
Form表单中的action提交路径问题 Form表单action属性和method属性的一些问题: 我遇到的是Form表单提交到servelet处理时遇到的问题:(1)<form name=& ...
- javascript将form表单中的元素值封装成json格式
把form表单中的元素值封装成json function toJSON(form)//form是要进行封装的form表单对象,dom对象,可以通过document.mainForm获得,mainFor ...
- form表单中的id 与name的区别
以前经常写form表单时,不写id和name,总觉得没有什么用.后来一看后台套完的页面发现,他们都补上name,不知道所以然,就查了一下资料,吓我一跳,要是照我那样写根本不会有数据传到服务器.原来表单 ...
- bootstrap中模态框如果放入form表单中会存在的问题
bootstrap中模态框如果放入form表单中会存在的问题:当模态框显示时,点回车会出现表单自动提交!!!所以在使用模态框的时候要特别注意!
- form表单中id与name的区别
以前经常写form表单时,不写id和name,总觉得没有什么用.后来一看后台套完的页面发现,他们都补上name,不知道所以然,就查了一下资料,吓我一跳,要是照我那样写根本不会有数据传到服务器.原来表单 ...
- jQuery中设置form表单中action的值的方法
下面介绍在jQuery中设置form表单中action的值的方法. $("#myFormId").attr("action", "userinfo.s ...
- jQuery中设置form表单中action值与js有什么不同。。。。
jQuery中设置form表单中action值与js有什么不同.... HTML代码如下: <form action="" method="post" i ...
- jsp中的form表单中的 id和name有什么区别了
<form action="./system/WebServer_webServerLogin" method="post" id="login ...
随机推荐
- How to chain a command after sudo su?
The idea is simple, for example: alias foo='sudo su foo && cd /tmp' However, it does not exe ...
- chrome 浏览器的插件权限有多大?
转自:https://segmentfault.com/q/1010000003777353 1)Chrome插件本身有机制控制,不会无限制的开放很多权限给你2)页面的DOM元素时可以操作的,Chro ...
- XMR恶意挖矿脚本处理笔记
一.登录 攻击者如何登录系统未能查出,所有日志已被清除.为防万一,把系统中没用的用户都删掉并修改其他用户密码. 二.被攻击后的表象 1.服务器资源被大量占用,资源占用率飙升: 2.服务器所有JS文件被 ...
- AutoMapperExtension
using System; using System.Collections.Generic; using System.Linq; using AutoMapper; using System.Co ...
- domino server端的Notes.ini详解
Web代理监控与调式问题 Web代理在服务器的执行优先级是最高的,由Web代理引发的服务器宕机现象很多,但是我们很难监控Web代理的运行.通过对notes.ini的研究可以通过如下途径进行处理 ...
- shell脚本死循环检查是否有特定的路由,若存在进行删除操作
while [ 1 ] do tun0_route=`ip route |grep -ci "100.100.80.0"` if [ $tun0_route -eq 0 ];the ...
- 11G新特性 -- RMAN Multisection Backups
Oracle 11g支持以sections的方式来备份和还原数据文件.在section级别进行备份,被称作multisection backup(多段备份).section是一个数据文件中连续的块.m ...
- SNF.CodeGenerator代码生成器前夕-代码生成器初始配置
如果你是第一次使用SNF快速开发平台的话,第一次运行代码生成器的话,可以需要以下信息来帮助你快速进行配置和使用. 代码生成器在使用之前有几个地方需要配置,如果是第一次登录会提示无授权,弹出一个框填入授 ...
- 一个vue请求接口渲染页面的例子
new Vue({ el:'#bodylist', data: { list: [ { "type_id": "1", "type_name" ...
- [CTCI] 最小调整有序
最小调整有序 题目描述 有一个整数数组,请编写一个函数,找出索引m和n,只要将m和n之间的元素排好序,整个数组就是有序的.注意:n-m应该越小越好,也就是说,找出符合条件的最短序列. 给定一个int数 ...