el-table + el-form实现可编辑表格字段验证

<div class="table_box">
<el-button type="primary" class="submit_btn" @click="addTable">添加</el-button>
<!-- 如果不想展示错误提示信息,可以加上show-message参数 -->
<el-form :model="productRuleForm" ref="productRuleForm" :rules="productRuleForm.rules" :show-message="false">
<el-table
:data="productRuleForm.tableData"
border
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
<template slot-scope="scope">
<!-- prop的规则: 在普通的form表单中是一个对象,prop是对象的属性. 表格是由多个对象组成的数组,在写prop是需要根据索引给值.这里的tableData就相当于对象的属性 !-->
<!-- rules也要单独给 -->
<el-form-item
:prop="'tableData.' + scope.$index + '.date'"
:rules='productRuleForm.rules.date'>
<el-date-picker
v-model="scope.row.date"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
<template slot-scope="scope">
<el-form-item
:prop="'tableData.' + scope.$index + '.name'"
:rules='productRuleForm.rules.name'>
<el-input v-model="scope.row.name"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop="phone"
label="电话">
<template slot-scope="scope">
<el-form-item
:prop="'tableData.' + scope.$index + '.phone'"
:rules='productRuleForm.rules.phone'>
<el-input v-model="scope.row.phone"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop="address"
label="地址">
<template slot-scope="scope">
<el-form-item
:prop="'tableData.' + scope.$index + '.address'"
:rules='productRuleForm.rules.address'>
<el-input v-model="scope.row.address"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
<el-button type="primary" class="submit_btn" @click="submit">提交</el-button>
</div>
js:
data () {
return {
productRuleForm: {
tableData: [{
date: '',
name: '',
phone: '',
address: ''
}],
rules: {
date: [{ required: true, message: '请选择日期', trigger: 'change' }],
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
phone: [{ required: true, message: '请输入电话号码', trigger: 'blur' }],
address: [{ required: true, message: '请输入地址', trigger: 'blur' }]
}
}
}
},
methods: {
// 添加一行
addTable () {
this.productRuleForm.tableData.push({
date: '',
name: '',
phone: '',
address: ''
})
}, // 提交数据
submit () {
this.$refs['productRuleForm'].validate((valid) => {
if (valid) { }
})
}
}
el-table + el-form实现可编辑表格字段验证的更多相关文章
- Django项目:CRM(客户关系管理系统)--38--30PerfectCRM实现King_admin编辑自定义字段验证
# kingadmin.py # ————————04PerfectCRM实现King_admin注册功能———————— from crm import models #print("ki ...
- 可编辑的表格:jQuery+PHP实现实时编辑表格字段内容
在本例中,我们会通过jQuery实现单击将一个文本信息变为可编辑的表单,你可以对文本内容进行编辑,然后点击“确定”按钮,新的内容将发送到后台PHP程序处理,并保存到数据库:当点击“取消”按钮,则页面恢 ...
- jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、
脚 本 之 家 www.jb51.net 脚本云 专题 素材下载 电子书 软件下载 源码下载 服务器常用软件 a5交易 首页 网页制作 脚本专栏 脚本下载 网络编程 数据库 CMS教程 电子书籍 平面 ...
- 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理
编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...
- HTML table、form表单标签的介绍
1. <table>标签 1.1说明: 在HTML 中定义表格布局. 1.2格式: <table> <caption></caption> <tr ...
- [HTML]HTML5实现可编辑表格
HTML5实现的简单的可编辑表格 [HTML]代码 <!DOCTYPE html > <html > <head> <meta charset="u ...
- Jqgrid入门-使用模态对话框编辑表格数据(三)
Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据.这三种方式分别是: Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGr ...
- jQuery实现可编辑表格
在很多的网页中,这个可编辑表格在许多地方都是非常有用,配合上AJAX技术能够实现很好的用户体验,下面我 们就jQuery来说明一下可编辑表格的实现步骤 首先是HTML代码,非常简单 <!DOCT ...
- 实现Easyui 可编辑表格
一.前端框架使用的easyui框架 二.后端使用的是jfinal 三.效果图 四.html代码 <div id="table_tree" class="easyui ...
随机推荐
- np.where()
numpy.where (condition[, x, y]) numpy.where()两种用法 1. np.where(condition, x, y) 满足条件(condition),输出x,不 ...
- Windows下Elasticsearch安装问题处理
按ES官网的安装方法正常安装就行了.可能遇到的其他问题. 1.报jvm.dll不存在. 只需要重新安装JDK过后,会有jdk1.8.0_73目录和jre1.8.0_73目录.因为java就喜欢玩这种“ ...
- Ironic 的 Rescue 救援模式实现流程
目录 文章目录 目录 救援模式 实现 UML 图 救援模式 以往只有虚拟机支持救援模式,裸机是不支持的.直到 Queen 版本 Ironic 实现了这个功能.救援模式下,用户可以完成修复.Troubl ...
- free()后内存不释放问题 - 内存缓冲池技术(转)
起因 下面这段代码执行后,内存有增无减,增加了200M,iOS平台200M不能接受了 // STL 集合类 void test1() { list<int> mList; for (int ...
- openstack共享组件--rabbitmq消息队列(1)
一.MQ 全称为 Message Queue, 消息队列( MQ ) 是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接来链接它们. 消息传 ...
- Django FBV CBV以及使用django提供的API接口
FBV 和 CBV 使用哪一种方式都可以,根据自己的情况进行选择 看看FBV的代码 URL的写法: from django.conf.urls import url from api import v ...
- SD相关号码范围IMG设定
一.定义项目建议的号码范围——OVZA.VN01 二.免费货物的号码范围——WC07 三.定义销售文件的号码范围——VN01 四.金额契约产品建议模组的号码范围——WSN1 五.定义出口.进口的号码范 ...
- iOS开发之点击tabBarItem进行Push一个页面
使用场景: 实现底部Tabbar两个TabBarItem,点击第二个跳转push到个人信息页面: 实现步骤: 首先设置UITabBarController的代理为appdelegate如下:myTab ...
- EF Code First 学习笔记:约定配置 Data Annotations+Fluent API
要更改EF中的默认配置有两个方法,一个是用Data Annotations(在命名空间System.ComponentModel.DataAnnotations;),直接作用于类的属性上面;还有一个就 ...
- Django与Session
Session Session的由来 Cookie虽然在一定程度上解决了"保持状态"的需求,但是由于Cookie本身最大支持4096字节,以及Cookie本身保存在客户端,可能 ...