elementui笔记:el-table表格的输入校验
<div id="blogColumnPayAdvert">
<div class="column-group">
<div class="column-group-item column-group0 ">
<div class="item-l">
<a class="item-target" href="https://blog.csdn.net/qq_43523725/category_10826938.html" target="_blank" title="前端提高" data-report-click="{"spm":"1001.2101.3001.6332"}">
<img class="item-target" src="https://i-blog.csdnimg.cn/blog_migrate/71c024dc224597326e838b8a1cb12c4d.png" alt="">
<span class="title item-target">
<span>
<span class="tit">前端提高</span>
<span class="dec more">同时被 2 个专栏收录<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/newArrowDown1White.png" alt=""></span>
</span>
</span>
</a>
</div>
<div class="item-m">
<span>142 篇文章</span>
<span>4 订阅</span>
</div>
<div class="item-r">
<a class="item-target article-column-bt articleColumnFreeBt" data-id="10826938">订阅专栏</a>
</div>
</div>
<div class="column-group-item column-group1 ">
<div class="item-l">
<a class="item-target" href="https://blog.csdn.net/qq_43523725/category_11147097.html" target="_blank" title="杂记——趣味百汇" data-report-click="{"spm":"1001.2101.3001.6332"}">
<img class="item-target" src="https://img-blog.csdnimg.cn/20190927151043371.png?x-oss-process=image/resize,m_fixed,h_224,w_224" alt="">
<span class="title item-target">
<span>
<span class="tit">杂记——趣味百汇</span>
</span>
</span>
</a>
</div>
<div class="item-m">
<span>8 篇文章</span>
<span>0 订阅</span>
</div>
<div class="item-r">
<a class="item-target article-column-bt articleColumnFreeBt" data-id="11147097">订阅专栏</a>
</div>
</div>
</div>
</div>
<article class="baidu_pl">
<div id="article_content" class="article_content clearfix">
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-b3c43d3711.css">
<div id="content_views" class="markdown_views prism-atom-one-dark">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
</svg>
<p>之前做得比较多的校验是在el-form表单里做的,但有时也遇到,需要在table内输入数据,然后校验输入的数据是否符合要求的情况。因此记录一下。</p>
思路:
1.需要借助el-form的校验,el-table外层嵌套一层el-form,使用el-form的校验机制
2.由于每行都需要校验,因此需要借助scope.$index
3.借助一个提交按钮,测试校验
效果:
1.不输入数据,直接点击“提交”触发校验,由于数据没有输入,校验不通过,给出校验提示
2.点击输入框输入,点击某一个字段,即正在输入状态,这个字段的校验结果就会被清除(clearValidate)
3.数据都填好之后,点击“提交”,再次触发校验
4.校验通过,显示全屏提示是否提交,点击“确定”即可,控制台会打印“校验通过”
例子:
html:
<div id="app">
<el-form class="base-form" ref="baseForm" :model="baseForm" :rules="rules" auto-complete="on">
<el-table ref="table-input" class="table" highlight-current-row :data="baseForm.demoList">
<el-table-column label="姓名" show-overflow-tooltip>
<template slot-scope="scope">
<el-form-item :prop="'demoList.'+scope.$index+'.name'" :rules="rules.name" class="all">
<el-input v-model="scope.row.name" placeholder="请输入" clearable @focus="$refs.baseForm.clearValidate(`demoList.${scope.$index}.name`)"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="年龄" show-overflow-tooltip>
<template slot-scope="scope">
<el-form-item :prop="'demoList.'+scope.$index+'.age'" :rules="rules.age" class="all">
<el-input v-model="scope.row.age" placeholder="请输入" clearable @focus="$refs.baseForm.clearValidate(`demoList.${scope.$index}.age`)"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="出生日期" show-overflow-tooltip>
<template slot-scope="scope">
<el-form-item :prop="'demoList.'+scope.$index+'.birthday'" :rules="rules.birthday" class="all">
<el-date-picker placeholder="请选择" v-model="scope.row.birthday" format="yyyy-MM-dd" clearable @focus="$refs.baseForm.clearValidate(`demoList.${scope.$index}.birthday`)"></el-date-picker>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="详细地址" show-overflow-tooltip>
<template slot-scope="scope">
<el-form-item :prop="'demoList.'+scope.$index+'.address'" :rules="rules.address" class="all">
<el-input v-model="scope.row.address" placeholder="请输入" clearable @focus="$refs.baseForm.clearValidate(`demoList.${scope.$index}.address`)"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
<div class="flex-c-a margin-top-10">
<el-button @click="submit">提交</el-button>
</div>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
data:此处只举例一行,多行的效果可自行加数据测试
baseForm: {
demoList: [
{
name: "",
age: "",
birthday: "",
address: ""
}
]
},
index: 0,
rules: {
name: [
{
required: true,
message: "请输入姓名",
trigger: "blur"
}
],
age: [
{ required: true, message: "请输入年龄", trigger: "blur" }
],
birthday: [
{ required: true, message: "请选择出生日期", trigger: "change" }
],
address: [
{ required: true, message: "请输入详细地址", trigger: "blur" }
],
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
method:
给一个提交按钮,测试校验
// 提交核对账目
submit() {
this.$refs.baseForm.validate((valid) => {
if (valid) {
this.$confirm("您确定【提交】?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
console.log("校验通过")
})
}
})
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
例子里使用的css:
.all {
width: 100%;
}
.flex-c-a {
display: flex;
align-items: center;
justify-content: space-around;
}
.margin-top-10 {
margin-top: 10px;
}
.base-form.el-form-item__content {
margin-left: 0;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
完成
</article>
:model=”ruleForm” 绑定的数据内容
:rules=”rules” 动态绑定的rules,表单验证规则
ref=”ruleForm” 绑定的对象
template模块
其实问题关键就在于如何给el-form-item动态绑定prop
:prop=”‘tableData.’ + scope.$index + ‘.字段名’”
<div cl
![](https://i-blog.csdnimg.cn/blog_migrate/c435921c498fd8cf48f9f07527be548a.png)
Table:
!!这个校验的实现,主要思路是:1.From表单中嵌套使用table表格,用表单的校验机制实现校验;
2.ivu-form-item元素,绑定动态prop;
html代码如下,本次项目里样式用了 View UI ,element其他,也同样适用这个校验方法:
<template>
<div class=“wrapper”>
<…
![](https://i-blog.csdnimg.cn/blog_migrate/c435921c498fd8cf48f9f07527be548a.png)
附上代码
<el-table-column
prop=“number”
label=“数量”
align=“center”
>
<template slot-scope=“scope”>
<el-input v-model=“scope.row.number” type=“number” size=“mini” placeholder=“请输入内 容”><…
![](https://i-blog.csdnimg.cn/blog_migrate/c435921c498fd8cf48f9f07527be548a.png)
2、在data里面定义rules
![](https://i-blog.csdnimg.cn/blog_migrate/c435921c498fd8cf48f9f07527be548a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c435921c498fd8cf48f9f07527be548a.png)
<template>
<el-form :model=“ruleForm” :rules=“ruleForm.rules” ref=“formRef”>
<el-table :data=“ruleForm.familyList” style=“width: 100%;” :row-style="{height:70+‘px’}
![](https://i-blog.csdnimg.cn/blog_migrate/c435921c498fd8cf48f9f07527be548a.png)
子组件 myInputNumber.vue
默认
![](https://i-blog.csdnimg.cn/blog_migrate/c435921c498fd8cf48f9f07527be548a.png)
过滤字母e,在js中属于数字,但是正则表达式 \d 是拦不住字母e 的
. 只能输入正整数
<el-input type=“number” placeholder=“请输入” min=“1” onKeypress="return (/[\d]/.test(String.fromC
![](https://i-blog.csdnimg.cn/blog_migrate/c435921c498fd8cf48f9f07527be548a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c435921c498fd8cf48f9f07527be548a.png)
数据部分:
此处字段根据后台字段返回决定:
校验正则:
![](https://i-blog.csdnimg.cn/blog_migrate/c435921c498fd8cf48f9f07527be548a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c435921c498fd8cf48f9f07527be548a.png)
解决:在表格中加入el-form-item,上代码
<el-form ref=“form” :model=“form” label-width=“120px” :rules=“rules”>
<el-form-item label=“优惠券配置:” prop=“payload”>
<el-table :data=“form.payload” border class=“padloadTable”&g.
![](https://i-blog.csdnimg.cn/blog_migrate/c435921c498fd8cf48f9f07527be548a.png)
<el-form :model=“inServForm” ref=“inServForm” :rules=“rules” size=“small”>
<el-table ref=“infiledList” border :data=“inServForm.infiledList” style=“width: 100%” >
<el-table-column prop=“matnrid” label=“物料编码” width="165p…
![](https://i-blog.csdnimg.cn/blog_migrate/c435921c498fd8cf48f9f07527be548a.png)
具体思路:1、由于确定按钮的校验是针对每一行的表单,所以el-form的ref值需要为动态的值,每次确定的校验也只校验当前行的结果。2、对于是否存在重复的值的校验,需要将当前正处于编辑状态的行与其他的行数据进行匹配,所以在自定义的校验函数里需要传入当前行的
![](https://i-blog.csdnimg.cn/blog_migrate/c435921c498fd8cf48f9f07527be548a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c435921c498fd8cf48f9f07527be548a.png)
实现思路:
1.由于vue是通过数据驱动展示页面内容,那么可以通过“添加条件”按钮往一个数组中添加对象,然后在下面展示区for循环遍历数组,从而动态生成输入表单。
2.已经完成了动态生成输入框/选择框。那么就是怎么加校验了。注意点来了,该循环的数组对象一点是要在这个form表单绑定的对象中才行:model=“dialogForm”
![](https://i-blog.csdnimg.cn/blog_migrate/c435921c498fd8cf48f9f07527be548a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c435921c498fd8cf48f9f07527be548a.png)
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
热门文章
分类专栏
最新评论
您愿意向朋友推荐“博客详情页”吗?
-
强烈不推荐
-
不推荐
-
一般般
-
推荐
-
强烈推荐
geoboylover: 博主我也是在y[0]这个地方报错无法取值
qq_52470615: 这么多机器人是哪里找的啊?
学网络的: 很详细!不错
Nine_Five_: 请问没有列名怎么读取?
小白学技术哈哈: 看了这么多,还是你的清楚又好用