elementUI表单嵌套表格并对每行进行校验
elementUI表单嵌套表格并对每行进行校验
elementUI表单嵌套表格并进行校验。
效果展示
先看看这是不是需要的效果^_^
如图，ElementUI 表单里嵌套了表格，表格内每行能进行【保存】【新增】【编辑】【删除】【重置】等操作，同时可以对每行的某些字段进行校验（而不是整个表单校验！），这种需求很常见，所以记录下来。
代码链接
关键代码
- 表格数据
// 数据格式必须是【对象嵌套数组】，【form】绑定表单，【list】绑定表格
form: {
// 表格数据
list: [
{ id: 1, name: '小叶', age: '12', phone: '123456', show: true },
{ id: 2, name: '小李', age: '23', phone: '123457', show: true },
{ id: 3, name: '小林', age: '12', phone: '123458', show: true }
]
},
- 组件嵌套
添加字段校验的时候，格式必须写成这样的
:prop="'list.' + scope.$index + '.name'"这是
elementui规定的格式，渲染后的结果为list.1.name每个字段要动态绑定表单的
rules属性如果不是以上的格式，会出错！！！
// 表单必须嵌套在表格的外面，表单必须绑定【rules】【ref】属性
<el-form :model="form" :rules="rules" ref="form">
<el-table :data="form.list">
<el-table-column prop="name" label="姓名">
<template scope="scope">
// 每个字段动态的绑定表单的【prop】【rules】属性
<el-form-item :prop="'list.' + scope.$index + '.name'" :rules="rules.name">
<el-input size="mini" v-model="scope.row.name" placeholder="请输入" clearable></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
校验方法
- 表单的字段对象存在于
this.$refs['form'].fields中，并且字段对象具有prop【datas.1.name】属性和validateField方法【验证datas.1.name能否通过校验】 - 但是
validateField方法需要手动创建来验证能否通过校验 - 必须创建，否则会出错！！！
// 表单校验方法
// 【form】是需要校验的表单，就是表单中【ref】绑定的字段
// 【index】是需要传入的行数，字段【scope.$index】
validateField(form, index) {
let result = true;
for (let item of this.$refs[form].fields) {
if(item.prop.split(".")[1] == index){
this.$refs[form].validateField(item.prop, err => {
if(err !="") {
result = false;
}
});
}
if(!result) break;
}
return result;
}
- 表单的字段对象存在于
重置方法
// 对【需要校验】的表单字段进行重置
// 参数同校验方法，如果是全部重置
reset(form, index) {
this.$refs[form].fields.forEach(item => {
if(item.prop.split(".")[1] == index){
item.resetField();
}
})
} // 如果需要全部重置可以直接质控表单中字段
// 【row】是每行传入的数据
resetRow(row) {
row.name = "";
row.age = "";
row.phone = "";
}
完整代码
因为用的是在线链接，网络不稳定时页面不一定能加载出来，使用时可以更换成本地的！
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue表单嵌套表格逐行验证</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<!-- 页面组件 -->
<h2 style="text-align: center; line-height: 23px;color: #909399;">vue表单嵌套表格逐行验证</h2>
<el-form :model="form" :rules="rules" ref="form" :inline="true"
style="margin: 23px auto 0px; width: 96%; overflow: hidden;">
<el-table border :data="form.list">
<el-table-column align="center" prop="id" label="序号" width="55">
</el-table-column>
<el-table-column align="center" prop="name" label="姓名">
<template scope="scope">
<el-form-item :prop="'list.' + scope.$index + '.name'" :rules="rules.name"
v-if="scope.row.show">
<el-input size="mini" v-model="scope.row.name" placeholder="请输入" clearable>
</el-input>
</el-form-item>
<div v-if="!scope.row.show">{{scope.row.name}}</div>
</template>
</el-table-column>
<el-table-column align="center" prop="age" label="年龄">
<template scope="scope">
<el-form-item :prop="'list.' + scope.$index + '.age'" :rules="rules.age" v-if="scope.row.show">
<el-input size="mini" v-model="scope.row.age" placeholder="请输入" clearable>
</el-input>
</el-form-item>
<div v-if="!scope.row.show">{{scope.row.age}}</div>
</template>
</el-table-column>
<el-table-column align="center" prop="phone" label="联系方式">
<template scope="scope">
<el-form-item :prop="'list.' + scope.$index + '.phone'" :rules="rules.phone"
v-if="scope.row.show">
<!-- <el-form-item v-if="scope.row.show"> -->
<el-input size="mini" v-model="scope.row.phone" placeholder="请输入" clearable>
</el-input>
</el-form-item>
<div v-if="!scope.row.show">{{scope.row.phone}}</div>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="290" fixed="right">
<template slot-scope="scope">
<el-button type="text" style="color: #E6A23C;" @click="save(scope.$index, scope.row)"
v-if="scope.row.show" icon="el-icon-check">保存
</el-button>
<el-button type="text" style="color: #409EFF;" @click="edit(scope.row)" v-if="!scope.row.show"
icon="el-icon-edit">编辑
</el-button>
<el-button type="text" style="color: #67C23A;" v-if="scope.$index+1 == listLength"
@click="addRow(scope.$index, scope.row)" icon="el-icon-plus">新增
</el-button>
<el-button type="text" style="color: #F56C6C;" @click="delRow(scope.$index, scope.row)"
icon="el-icon-delete">删除
</el-button>
<el-button type="text" style="color: #909399;" @click="reset('form', scope.$index)"
v-if="scope.row.show" icon="el-icon-refresh">重置
</el-button>
<!-- <el-button type="text" style="color: #909399;" @click="resetRow(scope.row)"
v-if="scope.row.show" icon="el-icon-refresh">重置
</el-button> -->
</template>
</el-table-column>
</el-table>
</el-form>
</div>
</body>
</html>
<script>
var app = new Vue({
el: '#app',
data() {
return {
// 表单数据
form: {
// 表格数据
list: [{ id: 1, name: '', age: '', phone: '', show: true }]
},
// 表单验证规则
rules: {
name: [{ required: true, message: '请输入姓名！', trigger: 'blur' }],
age: [{ required: true, message: '请输入年龄！', trigger: 'blur' }],
phone: [{ required: true, message: '请输入联系方式！', trigger: 'blur' }],
},
// 表格长度默认为 1
listLength: 1,
}
},
methods: {
// 校验
validateField(form, index) {
let result = true;
for (let item of this.$refs[form].fields) {
if (item.prop.split(".")[1] == index) {
this.$refs[form].validateField(item.prop, err => {
if (err != "") {
result = false;
}
});
}
if (!result) break;
}
return result;
},
// 重置【只针对校验字段】
reset(form, index) {
this.$refs[form].fields.forEach(item => {
if (item.prop.split(".")[1] == index) {
item.resetField();
}
})
},
// 重置【全部】
resetRow(row) {
row.name = "";
row.age = "";
row.phone = "";
},
// 保存
save(index, row) {
if (!this.validateField('form', index)) return;
row.show = false;
},
// 新增
addRow(index, row) {
if (!this.validateField('form', index)) return;
this.form.list.push({
id: index + 2,
name: '',
age: '',
phone: '',
show: true
});
this.listLength = this.form.list.length;
},
// 编辑
edit(row) {
row.show = true;
},
// 删除
delRow(index, row) {
if (this.form.list.length > 1) {
this.form.list.splice(index, 1);
this.listLength = this.form.list.length;
} else {
this.form.list = [{
id: 1,
name: '',
age: '',
phone: '',
show: true
}];
}
},
}
})
</script>
整理不易，给个赞呗~
elementUI表单嵌套表格并对每行进行校验的更多相关文章
- elementUI表单嵌套时间报错
elementUI表单嵌套日期时间选择时间后报错 <el-form-item label="起始结束时间:" required prop="startime&quo ...
- Vue Element-ui表单校验规则，你掌握了哪些？
1.前言 Element-ui表单校验规则,使得错误提示可以直接在form-item下面显示,无需弹出框,因此还是很好用的. 我在做了登录页面的表单校验后,一度以为我已经很了解表单的校验规则. ...
- 制作Html标签以及表单、表格内容
制作Html一般用DW(......),Html全称为(Hyper Text Markup Language 超文本标记语言) 文本就是平常电脑上的文本文档,只能存储文字,而超文本文档可以存储音乐 ...
- 精通CSS+DIV网页样式与布局--设置表单和表格
表格和表单是网页中非常重要的两个元素,在上篇博客中,我们简单的介绍了CSS的页面背景设置,今天小编继续来介绍CSS的相关知识,在我们的CSS中如何设置表格和表单,首先,来看一张思维导图,通过图简单的预 ...
- Android程序员学WEB前端(3)-HTML(3)-表单嵌套-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522586觉得博文有用,请点赞,请评论,请关注,谢谢!~ 表单嵌套: <!DO ...
- jQuery 控制表单和表格
这里总结了jQuery中对表格和表单的一些常用操作, 通过这里的实例和操作肯定对jQuery的掌握有一个新得提高, 希望大家耐心看完, 多实践. <!DOCTYPE html PUBLIC &q ...
- SNF快速开发平台MVC-各种级联绑定方式，演示样例程序（包含表单和表格控件）
做了这么多项目,经常会使用到级联.联动的情况. 如:省.市.县.区.一级分类.二级分类.三级分类.仓库.货位. 方式:有表单需要做级联的,还是表格行上需要做级联操作的. 实现:实现方法也有很多种方式. ...
- Angular 表单嵌套、动态表单
说明: 组件使用了ng-zorro (https://ng.ant.design/docs/introduce/zh) 第一类:嵌套表单 1. 静态表单嵌套 demo.component.html & ...
- elementUI表单验证
elementUI表单验证非常方便,我们直奔主题: <template> <el-form ref="orderForm" :model="orderF ...
随机推荐
- Scala(三)【函数式编程】
目录 一.方法和函数 1.方法 1)基本语法 2)简化原则 3)方法参数 2.函数 3.方法和函数的区别 二.高阶函数 三.匿名函数 四.柯里化 五.闭包 一.方法和函数 1.方法 1)基本语法 de ...
- react动态添加样式：style和className
react开发过程中,经常会需要动态向元素内添加样式style或className,那么应该如何动态添加呢??? 一.react向元素内,动态添加style 例如:有一个DIV元素, 需要动态添加一个 ...
- 【Linux】【Services】【SaaS】Spinnaker
1. 简介 1.1. 说明: Spinnaker 是 Netflix 的开源项目,是一个持续交付平台,它定位于将产品快速且持续的部署到多种云平台上.Spinnaker 通过将发布和各个云平台解耦,来将 ...
- Copy constructor vs assignment operator in C++
Difficulty Level: Rookie Consider the following C++ program. 1 #include<iostream> 2 #include&l ...
- hadoop基本命令（转）
在这篇文章中,我们默认认为Hadoop环境已经由运维人员配置好直接可以使用. 假设Hadoop的安装目录HADOOP_HOME为/home/admin/hadoop. 启动与关闭 启动HADOOP 进 ...
- Win10 Chrome 在DPI缩放下导致界面放大问题 解决方案
支持:54.0.2840.59 m (64-bit) 以下大多数版本,具体未测试.如有问题可以反馈一下. 方法1:为程序设置"高DPI设置时禁用显示缩放. 方法2:为程序添加启动参数: /h ...
- Linux系统下安装tomcat
一.前置条件 安装tomcat需要先安装jdk,所以没有安装jdk同学,详见参考文章 二.Linux上安装tomcat 1. 下载Apache tomcat tomcat官网下载地址 在左边,可以选择 ...
- 算法 A-Star(A星)寻路
一.简介 在游戏中,有一个很常见地需求,就是要让一个角色从A点走向B点,我们期望是让角色走最少的路.嗯,大家可能会说,直线就是最短的.没错,但大多数时候,A到B中间都会出现一些角色无法穿越的东西,比如 ...
- typescript接口---interface
假如我现在需要批量生产一批对象,这些对象有相同的属性,并且对应属性值的数据类型一致.该怎么去做? 在ts中,因为要检验数据类型,所以必须对每个变量进行规范,自然也提供了一种批量规范的功能.这个功能就是 ...
- iterator 前++ 后++区别
for(iterator it = begin(); it != end(); ++it) 此处的 begin()<==>this->begin() 或者for(ite ...