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" : ...
随机推荐
- java stream 简单函数
写在前面 本文为笔者学习的一些心得,如有问题,评论请轻喷 本文分为以下部分: 中间操作 终止操作 归纳 中间操作 对 list 进行操作,返回一个新的 list 主要函数 作用 filter 过滤操作 ...
- WPF加载GIF的五种方式（Storyboard / WpfAnimatedGif / ImageAnimator / PictureBox / MediaElement）
部分内容参考博文WPF 如何显示gif 一.使用Storyboard 效果: (1)页面xaml: <Window x:Class="PlayGifDemo.StoryboardWin ...
- 7款优秀的AI搜索引擎工具推荐
AI搜索引擎不仅能够理解复杂的查询语句,还能够通过学习用户的搜索习惯和偏好,提供更加个性化的搜索结果.本篇文章将介绍7款在这一领域表现出色的AI搜索引擎工具,它们各有特色,但都致力于为用户提供更加智能 ...
- SpringBoot自定义注解失效原因（2022-10-3）
长话短说,我负责的是一个多模块项目,接手的时候没有注意 @ComponentScan 注解的扫描范围,所以打包的时候,没有扫到我新加包. 所以,重点检查下 @ComponentScan 注解的范围
- Swift 属性装饰器
import ArgumentParser @propertyWrapper struct WrapperTest { internal var innerValue: Int { didSet { ...
- 继承,super,重写,多态,抽象,接口
继承,super,重写,多态,抽象,接口 继承 extends 用于表示两个类之间的继承关系,继承是OOP的四大特性之一,他允许一个类(称之为子类或派送类) 继承另一个类(称之为父类或基类)的变量和方 ...
- 初识c语言—c语言的初步认识和一个简单的程序
C语言是什么 编程语言(编程语言是控制计算机的一系列指令,他又固定的格式和词汇.同时也叫计算机语言(计算机语言是,人和计算机通讯的语言)) C语言的特点 语言简洁,紧凑,使用方便 运算符丰富 数据类型 ...
- C#.NET 不可见字符DEL
不可见字符DEL .空格.替换掉. 签名时遇到了客户端发过来的数据包含一个DEL.Notepad++ 里显示为DEL. 包含这个字符签名给上游,就会报错:签名错误. 得想办法replace掉.目前方案 ...
- 利用.htaccess绑定子域名到子目录
Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解` 利用.htaccess绑定子域名到子目录 日期:2018- ...
- （四）Redis 缓存应用、淘汰机制
1.缓存应用 一个系统中不同层面数据访问速度不一样,以计算机为例,CPU.内存和磁盘这三层的访问速度从几十 ns 到 100ns,再到几 ms,性能的差异很大,如果每次 CPU 处理数据时都要到磁盘读 ...