ElementUI FORM结合Vue实现横向排列表单项
结合Vue实现横向排列表单项
前言
默认的，ElementUI的Form表单项(控件)是垂直排列，即一行显示一个表单项。但是在实际应用中，有时候会需要一行显示多个表单项。针对这类需求，笔者提供以下解决方案
解决方案
1、修改表单项.el-form-item样式
如下，增加display属性，设置值为inline-block !important; 因为默认的，表单项为块元素，这样设置以后，可以让表单项变成内联元素，这样表单项就可以横向排列在一起了
.el-form-item {
display: inline-block !important;
}
2、修改表单项.el-form-item__label样式
如下，设置display为none，即隐藏自带的表单项标签，然后设置width为0px !important;，避免被隐藏 标签继续占用空间
.el-form-item__label {
display: none;
width: 0px !important;
}
这样以后，使用<span>labelName</span>作为自定义标签项
3、修改表单项.el-form-item__content样式
如下，避免表单项在视觉上看上去两头占了很大空白
.el-form-item__content {
margin-left: 3px !important;
margin-right: 3px !important;
}
4、使用row和col组件控制哪些表单项归属同一行、同一列
应用举例
<el-form
:model="loadSettingsForm"
:rules="loadSettingsFormRules"
ref="loadSettingsForm"
label-width="100px"
class="load-settings-form"
>
<el-row>
<el-col>
<span>场景名称</span>
<el-form-item prop="name">
<el-input v-model="loadSettingsForm.name" maxlength="50" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<span>是否梯度加压</span>
<el-form-item>
<el-radio v-model="loadSettingsForm.isSteppingPressure" :label="true">是</el-radio>
<el-radio v-model="loadSettingsForm.isSteppingPressure" :label="false">否</el-radio>
</el-form-item>
</el-col>
</el-row>
<div class="el-form-row-wrapper" v-if="loadSettingsForm.isSteppingPressure">
<el-row>
<el-col>
<span>初始启动</span>
<el-form-item prop="initialUserNum">
<el-input
v-model="loadSettingsForm.initialUserNum"
maxlength="2"
oninput="value=value.replace(/[^\d]/g,'')"
/>
</el-form-item>
<span>个用户，每隔</span>
<el-form-item prop="interval">
<el-input
v-model="loadSettingsForm.interval"
maxlength="4"
oninput="value=value.replace(/[^\d]/g,'')"
/>
</el-form-item>
<span>秒，</span>
</el-col>
</el-row>
<el-row>
<el-col>
<span>按每秒启动</span>
<el-form-item prop="spawnRate">
<el-input
v-model="loadSettingsForm.spawnRate"
maxlength="2"
oninput="value=value.replace(/[^\d]/g,'')"
/>
</el-form-item>
<span>个用户的速率增加</span>
<el-form-item prop="add">
<el-input
v-model="loadSettingsForm.add"
maxlength="2"
oninput="value=value.replace(/[^\d]/g,'')"
/>
</el-form-item>
<span>个用户，直至增加到</span>
<el-form-item prop="targetUserCount">
<el-input
v-model="loadSettingsForm.targetUserCount"
maxlength="6"
oninput="value=value.replace(/[^\d]/g,'')"
/>
</el-form-item>
<span>个用户</span>
</el-col>
</el-row>
</div>
<div class="el-form-row-wrapper" v-else>
<el-row>
<el-col>
<span>按每秒启动</span>
<el-form-item prop="spawnRate">
<el-input
v-model="loadSettingsForm.spawnRate"
maxlength="2"
oninput="value=value.replace(/[^\d]/g,'')"
/>
</el-form-item>
<span>个用户的速率启动</span>
<el-form-item prop="targetUserCount">
<el-input
v-model="loadSettingsForm.targetUserCount"
maxlength="6"
oninput="value=value.replace(/[^\d]/g,'')"
/>
</el-form-item>
<span>个用户</span>
</el-col>
</el-row>
</div>
<div>
<el-row>
<el-col>
<el-radio
v-model="loadSettingsForm.loadRunMode"
:label="1"
style="margin-right:0px"
>每个用户运行</el-radio>
<el-form-item prop="iterationNumEachUser">
<el-input
v-model="loadSettingsForm.iterationNumEachUser"
maxlength="18"
oninput="value=value.replace(/[^\d]/g,'')"
/>
</el-form-item>
<span>次</span>
<el-radio
v-model="loadSettingsForm.loadRunMode"
:label="2"
style="margin-left:20px; margin-right:0px;"
>持续运行</el-radio>
<el-form-item prop="holdLoadTime">
<el-input
v-model="loadSettingsForm.holdLoadTime"
maxlength="18"
oninput="value=value.replace(/[^\d]/g,'')"
/>
</el-form-item>
<span>秒</span>
</el-col>
</el-row>
</div>
<div class="el-form-row-wrapper">
<el-row>
<el-col>
<span>在开始下一轮迭代之前</span>
<el-form-item style="width:80px">
<el-radio v-model="loadSettingsForm.iterationWaitModel" :label="1">固定等待</el-radio>
</el-form-item>
<el-form-item prop="iterationWaitTime">
<el-input
v-model="loadSettingsForm.iterationWaitTime"
maxlength="6"
oninput="value=value.replace(/[^\d]/g,'')"
/>
</el-form-item>
<span>秒</span>
<el-form-item style="width:110px">
<el-radio
v-model="loadSettingsForm.iterationWaitModel"
:label="2"
style="margin-left:30px"
>随机等待</el-radio>
</el-form-item>
<el-form-item prop="iterationMinWait">
<el-input
v-model="loadSettingsForm.iterationMinWait"
maxlength="6"
oninput="value=value.replace(/[^\d]/g,'')"
/>
</el-form-item>
<span>到</span>
<el-form-item prop="iterationMaxWait">
<el-input
v-model="loadSettingsForm.iterationMaxWait"
maxlength="6"
oninput="value=value.replace(/[^\d]/g,'')"
/>
</el-form-item>
<span>秒</span>
</el-col>
</el-row>
<el-row>
<el-col>
<span>最后每秒停止</span>
<el-form-item prop="stopRate">
<el-input
v-model="loadSettingsForm.stopRate"
maxlength="2"
oninput="value=value.replace(/[^\d]/g,'')"
/>
</el-form-item>
<span>个用户</span>
</el-col>
</el-row>
</div>
<el-row>
<el-col>
<span>迭代模式</span>
<el-form-item>
<el-radio v-model="loadSettingsForm.iterationMode" :label="1">用例串行</el-radio>
<el-radio v-model="loadSettingsForm.iterationMode" :label="2">用例权重</el-radio>
<el-radio v-model="loadSettingsForm.iterationMode" :label="3">用例随机</el-radio>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>
export default {
data() {
return {
loadSettingsForm: {
name: "",
host: "",
isSteppingPressure: false, // 是否梯度加压 true-是 否-false
loadRunMode: 1, // 运行方式 1-按次数运行 2-按时间运行
initialUserNum: 10,
interval: 180,
spawnRate: 5,
add: 10,
targetUserCount: 1,
holdLoadTime: 1800,
stopRate: 5,
iterationNumEachUser: 1,
iterationWaitModel: 1, // 1-固定等待 2-随机等待
iterationWaitTime: 0,
iterationMinWait: 0,
iterationMaxWait: 5,
iterationMode: 1 //迭代模式 1 - 用例串行 2 - 用例权重 3 - 用例随机
},
loadSettingsFormRules: {
name: [{
required: true, trigger: "blur", message: "此配置项必填"
},
{ min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
],
targetUserCount: [
{ required: true, message: "此配置项必填", trigger: "blur" }
],
spawnRate: [{ required: true, message: "此配置项必填" }],
iterationNumEachUser: [
{
required: this.loadSettingsForm.loadRunMode == 1,
message: "此配置项必填",
trigger: "blur"
}
],
holdLoadTime: [
{
required: !(this.loadSettingsForm.loadRunMode == 1),
message: "此配置项必填",
trigger: "blur"
}
],
stopRate: [
{
required: true,
message: "此配置项必填",
trigger: "blur"
}
]
}
};
},
watch: {
"loadSettingsForm.loadRunMode": {
handler(newValue, oldValue) {
this.loadSettingsFormRules.iterationNumEachUser[0].required = !this
.loadSettingsFormRules.iterationNumEachUser[0].required;
this.loadSettingsFormRules.holdLoadTime[0].required = !this
.loadSettingsFormRules.holdLoadTime[0].required;
this.$nextTick(() => {
this.$refs.loadSettingsForm.clearValidate();
})
},
},
"loadSettingsForm.isSteppingPressure": {
handler(newValue, oldValue) {
this.$nextTick(() => {
this.$refs.loadSettingsForm.clearValidate();
})
},
}
}
};
</script>
<style lang="scss">
.load-settings-form {
padding-right: 20px;
padding-left: 20px;
.el-form-item__label {
display: none;
width: 0px !important;
}
.el-form-item__content {
margin-left: 3px !important;
margin-right: 3px !important;
}
.el-form-item {
display: inline-block !important;
}
.el-form-row-wrapper {
.el-form-item__content {
width: 85px;
}
}
}
</style>
效果截图
ElementUI FORM结合Vue实现横向排列表单项的更多相关文章
- vue elementui form表单验证
最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周 就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...
- 实现移动端touch事件的横向滑动列表效果
要实现手机端横向滑动效果并不难,了解实现的原理及业务逻辑就很容易实现.原理:touchstart(手指按下瞬间获取相对于页面的位置)——>touchmove(手指移动多少,元素相应移动多少). ...
- element-ui Form表单验证
element-ui Form表单验证规则全解 element的form表单非常好用,自带了验证规则,用起来很方便,官网给的案例对于一些普通场景完全没问题,不过一些复杂场景的验证还得自己多看文档摸索, ...
- wukong引擎源码分析之索引——part 1 倒排列表本质是有序数组存储
searcher.IndexDocument(0, types.DocumentIndexData{Content: "此次百度收购将成中国互联网最大并购"}) engine.go ...
- vue实现购物清单列表添加删除
vue实现购物清单列表添加删除 一.总结 一句话总结: 基础的v-model操作,以及数组的添加(push)删除(splice)操作 1.checkbox可以绑定数组,也可以直接绑定值? 绑定数组就是 ...
- VUE Angular通用动态列表组件-亦可为自动轮播组件-02-根据数据量自动横向滚动,鼠标划入停止滚动
本文为横向轮播,纵向轮播/动态列表组件请戳---- 代码是angular的,稍微改改就可以放入Vue项目里,差别不大哟 以下代码可以根据实际情况自行调整 父组件html <app-scroll- ...
- 应用二：Vue之ElementUI Form表单校验
(注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的) 表单校验是前端开发过程中最常用到的功能之一,根据个人的工作经验总结在此对表单校验功能的基 ...
- vue element-ui form验证中自定义验证方式通过不返回true问题
项目中使用了element-ui的form验证,自定义了手机号的验证规则,验证不通过的时候定义了callback()扔出错误.但是忘了写通过的callback().导致form验证通过拿不到返回的va ...
- vue element-UI Form表单验证
摘自官网 https://element.eleme.cn/#/zh-CN/component/form 保证prop的值等于v-model的值,并且初始化值,这样验证才好使. 可以自定义验证 < ...
- vue + elementui form resetFields方法 无法重置表单
this.$refs['form'].resetFields(); 方法无法重置.1 el-form 组件 没有添加 ref 属性 <el-form ref="form" : ...
随机推荐
- 【C#】预处理指令的学习 条件编译
预处理指令,我的理解是,编译器在编译过程中所做的指令,能根据用户定义的条件选择性的编译代码. 比如在debug下要打印些信息,然而release之后,不能出现debug的信息,这个时候就能用预处理指令 ...
- OpenQA.Selenium.WebDriverException The HTTP request to the remote WebDriver server for URL timed out
OpenQA.Selenium.WebDriverException:"The HTTP request to the remote WebDriver server for URL htt ...
- 基于centos7的企业级ceph集群搭建[nautilus14.22版]
集群规划 本案例通过ceph-deploy方式部署 主机名 配置 外网IP / 内网IP 角色 系统版本 ceph-node01 磁盘x3 50G 192.168.3.101/24 172.16.1. ...
- C基本知识
1 C基本数据类型 C基本的数据类型说明: 2 字节序 测试代码: #include <stdio.h> typedef unsigned char *byte_pointer; void ...
- Linux进程间通信-管道（pipe）
本系列文章主要是学习记录Linux下进程间通信的方式. 常用的进程间通信方式:管道.FIFO.消息队列.信号量以及共享存储. 参考文档:<UNIX环境高级编程(第三版)> 参考视频:Lin ...
- vmware 虚拟WIN10 chrome核心浏览器部分菜单花掉
解决方法:在vmware 显示器设置中,关闭"加速 3D 图形".
- SRE心里话：要求100%服务可用性就是老板的无知
<SRE Google 运维解密>第3章讲了拥抱风险,一些关键的观点,在这里与大家分享,融入了我自己的一些理解,希望对你有些帮助. 服务可用性必须100%?其实完全没必要 一个服务客户的产 ...
- Mysql常见安装失败的解决方法
问题一:安装时出现Initializing database失败 解决方法: 1.关闭安装页面并卸载MySQL Installer与MySQL Server (如果卸载不掉需要重启电脑) 2.查看并勾 ...
- vue3 父子组件间的传值通信
1.父转子 // 父组件 <template> <div> <div> <p>{{ count }}</p> <Son :countF ...
- redis简单应用demo - 订单号自增长的思路：业务编码+地区+自增数值
redis简单应用demo1.字符串127.0.0.1:6379> set hello toneyOK127.0.0.1:6379> type hellostring127.0.0.1:6 ...