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" : ...
随机推荐
- django多表关联实战
定义模型类: from django.db import models from django.contrib.auth.models import User ''' ---------- Djang ...
- jQuery模态框原理
<!-- 引入jQuery.js --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquer ...
- Android 13 - Media框架（16）- OpenMax（四）
关注公众号免费阅读全文,进入音视频开发技术分享群! 这一节继续了解 openmax 目录下的内容. 1.OMX_Core.h 1.1.OMX_BUFFERHEADERTYPE 这是一个比较关键的结构体 ...
- js重复赋值 js数据交换 js调式方法
重复赋值 对一个变量,对此赋值,存储数据 定义变量时对变量初始化 此时js语法规定,必须带有关键词var 或者let 或者const 之后使用变量时,不需要带有关键词 第一次定义变量,初始化变量,必须 ...
- LeetCode 685. Redundant Connection II 冗余连接 II (C++/Java)
题目: In this problem, a rooted tree is a directed graph such that, there is exactly one node (the roo ...
- 对pta的总结_1
前言 这三次pta难度在不断上升的同时,要求我们线上慕课+自主学习来了解更多的java中的各种方法,如:正则表达式 List Map等.与此同时要求我们展开尝试并熟练类的构造,类的引用,链表的基本运用 ...
- 小米 红米 Redmi MIUI 5G开关
小米 红米 Redmi MIUI 5G开关 1.打开手机拨号界面输入 *#*#54638#*#* 之后拨号界面底部会显示display 5G network menu (显示5G网络菜单) 注意:先是 ...
- Spring事务隔离级别和传播机制
引言 什么是事务? 在理解事务之前,我们要先了解事务的基本作用 比如在生活中有这样一个场景----取钱,每个人应该都干过的事 在ATM机上取钱,1.输入密码----2.输入金额----3.银行扣钱-- ...
- Jx9 虚拟机
一.Jx9 虚拟机的生命周期 加载 Jx9 脚本 jx9_compile() 或 jx9_compile_file(),加载编译成功后,Jx9 引擎将自动创建一个实例 (jx9_vm) 并且返回指向此 ...
- 【VMware vSphere】使用RVTools中的PowerShell脚本创建导出vSphere环境信息的自动化任务。
RVTools 是 VMware 生态系统中一个非常受欢迎且免费的 Windows 实用工具,用于收集并显示 VMware vSphere 环境中的相关信息,如虚拟机.主机及集群等相关配置.RVToo ...