实际项目中的场景，需要在table里做表单的验证，如图效果：

其实问题关键就在于如何给el-form-item动态绑定prop

:prop="'tableData.' + scope.$index + '.字段名'"

详见代码：

border

:data="model.tableData"

style="width: 100%;"

:default-sort = "{prop: 'date', order: 'descending'}"

>

width="100px"

label="要求批次">

width="180px"

label="要求供应商">

width="180px"

label="要求生产日期">

width="180px"

label="要求有效期至">

width="150px"

label="要求商品形态">

width="100px"

label="期待出库数量">

label="操作">

删除

export default {

data(){

return {

form:{

supplier2:"",

type:"",

desc:"",

input:""

},

model:{

rules: {

name:{ type:"string",required:true,message:"必填字段",trigger:"change"},

input:{ type:"string",required:true,message:"必填字段",trigger:"change"},

supplier:{ type:"string",required:true,message:"必填字段",trigger:"change"},

goodstatus:{ type:"string",required:true,message:"必填字段",trigger:"change"},

"producedate.start":{ type:"string",required:true,message:"必填字段",trigger:"change"},

"expireddate.start":{ type:"string",required:true,message:"必填字段",trigger:"change"}

},

tableData:[{

input:"",

name:"",

supplier:"",

goodstatus:"",

producedate:{

start:""

},

expireddate:{

start:""

}

},{

input:"",

name:"",

supplier:"",

goodstatus:"",

producedate:{

start:""

},

expireddate:{

start:""

}

}]

}

}

},

methods: {

add () {

console.log(this.form);

},

save () {

this.$refs["form"].validate((valid,model)=>{

console.log(valid);

console.log(model);

})

}

}

}

vue + element 实现登录注册(自定义表单验证规则)

注册页包含手机验证码登录和密码的二次验证. 效果如下: 实现代码:

amaze UI 如何添加原生表单验证

这段时间做的一个项目,整个系统就一个页面,然后就是各种模态框,js里拼HTML代码,而且因为表单空留距离小,最后选定了amaze ui原生的表单验证 在amaze ui官网找到 表单验证. 但是ama ...

SNF快速开发平台MVC-各种级联绑定方式，演示样例程序(包含表单和表格控件)

做了这么多项目,经常会使用到级联.联动的情况. 如:省.市.县.区.一级分类.二级分类.三级分类.仓库.货位. 方式:有表单需要做级联的,还是表格行上需要做级联操作的. 实现:实现方法也有很多种方式. ...

【vue】vue使用Element组件时v-for循环里的表单项验证方法

转载至:https://www.jb51.net/article/142750.htm标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中 ...

群里分享的react的收藏一下！今日周末，改了个表单验证然后无所事事了！

今日周末,改了个表单验证然后无所事事了,然后把昨天群里分享的react的收藏一下尽管现在还在研究angular和nodeJs毕竟刚刚开始用有点不熟...没准以后会研究一下react毕竟看着下面这张图还 ...

jQuery基础(常用插件 表单验证，图片放大镜，自定义对象级，jQuery UI，面板折叠)

1.表单验证插件——validate   该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:   $(form).validate({o ...

随机推荐

JS函数运行在它们被定义的作用域内，而不是它们被执行的作用域内

一个函数的作用域并不会因为被另一个函数调用而拓展,取得另一个函数的作用域: function show(name){ alert(name) } function show2(){ var name= ...

6.5 THUSC 考试题解

QAQ 由于并没有数据,而且没有A掉的是提交答案题目,所以并没有修改 QAQ 只能放题解了,代码还没有拿到,不过在清华听了一波习题讲评的安利 第一题 成绩单 先说暴力分 对于单调序列来说最优决策一定是 ...

mac with windows dirver

S1: find your mac serial number on the back,like Serial No.C02Fn09GDDQW S2: baidu "苹果序列号查询&quot ...

hdu 1232

以前写的.....拿出来看看.... 并查集模板: #include #include using namespace std; int ...

打造你自己ajax上传图片

今天,我们需要的图片上传插件,但是,互联网不提供符合他们的需要和易于使用的.所以我写了自己. 方法1,只使用jquery代码,.代码例如以下

上传图片&l ...

PAT1035: Password

1035. Password (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue To prepare f ...

HTML入门标签学习

1.标题:

. . . .

Spark SQL自定义外部数据源

1 涉及到的API BaseRelation: In a simple way, we can say it represents the collection of tuples with know ...

node mongodb 案例代码

1.db: var mongoose=require("mongoose"); mongoose.connect('mongodb://localhost:8686/mytest' ...

table中加表单元素怎么验证_element-ui 解决 table 里包含表单验证的问题！相关推荐

  1. table中加表单元素每行怎么验证_Validform 一行代码搞定整站的表单验证 - 文章

    Validform 一行代码搞定整站的表单验证,为什么能如此方便?插件的核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素,让验证代码在执行时只是核对表单下各元素的值是否跟绑定的验证条件相符 ...

  2. table中加表单元素怎么验证_使用element-ui +Vue 解决 table 里包含表单验证的问题...

    应用场景: 在实际使用中经常会遇到需要在Form表单中使用table表格进行表单提交,同时又需要对table的字段进行校验,效果如图所示: 这个校验中,最关键的问题在于如何给el-form-item ...

  3. element-ui 解决 table 里包含表单验证的问题！

    element-ui 解决 table 里包含表单验证的问题! 参考文章: (1)element-ui 解决 table 里包含表单验证的问题! (2)https://www.cnblogs.com/ ...

  4. [vue-element] ElementUI是怎么做表单验证的？在循环里对每个input验证怎么做呢？

    [vue] ElementUI是怎么做表单验证的?在循环里对每个input验证怎么做呢? model 绑定表单数据,通过prop取表单数值,通过编写ref进行后台API验证 ,根据rules进行表单内 ...

  5. table中加表单元素怎么验证_045、DOM编程实例和表单

    1.DOM编程实例1 JavaScript this 关键词指的是它所属的对象. 它拥有不同的值,具体取决于它的使用位置: 在方法中,this 指的是所有者对象. 单独的情况下,this 指的是全局对 ...

  6. table中加表单元素怎么验证_el-table嵌入表单元素注意事项（验证规则prop写法与数据初始化）...

    场景:在el-table表格中嵌入表单元素 绑定数据: table : :data="planFormData.allocationPlan" el-form-item: v-mo ...

  7. 哈希表中能有相同元素吗_最小删除以使用哈希表使所有元素相同

    哈希表中能有相同元素吗 Prerequisite: Hashing data structure 先决条件: 哈希数据结构 Problem statement: 问题陈述: Find minimum ...

  8. html+在ul中加边框,为元素添加边框，你有多少种好办法？

    本文作者:IMWeb 莫卓颖 未经同意,禁止转载 背景 相信大家在做项目的过程中会经常遇到这样的一个需求,鼠标hover到某个元素的时候为这个元素添加边框,这个简单的需求仅需注意添加边框后不会对原有的 ...

  9. element ui table 中加下拉菜单

    <el-table-column prop="roleList" label=角色 :width="180">        <templat ...

最新文章

  1. 特斯拉VS Waymo：谁将赢得无人驾驶汽车竞赛？
  2. 「小程序JAVA实战」小程序头像图片上传（下）（45）
  3. spring的Aop使用问题
  4. 1716: 棒棒糖(暴力破解+优化)
  5. 怎么让e-charts折线图只有6个刻度_简单6步，打开图表定制之门
  6. MVC + LigerUI 做后台管理还真是清爽
  7. 自动驾驶芯片_自动驾驶芯片“争夺战”
  8. 内固定取出术后护理_“钢铁侠“们注意了——身体内的钢板或内固定需要取出吗？...
  9. OSPF Sham-Link
  10. jQuery源码阅读（一）---jQuery源码整体架构
  11. 倍福--读取控制器诊断信息
  12. 微信公众号后台接口文档
  13. c语言程序设计精髓第六章编程题
  14. 【AIOT】HumanCenteredSensing
  15. Centos使用chrony做时间同步
  16. 用静息态fMRI映射人脑多巴胺能影像
  17. excel怎么拆分表格
  18. zbb20170811 linux 给用户授予文件夹权限
  19. ObjectARX2010二次开发之 --- DXF转G代码(1)
  20. 论文中学院等信息的对齐方法

热门文章

  1. roc_curve()，ROC曲线，混淆矩阵，开集闭集等概念
  2. Monkey Patching in Go
  3. 使用pygame开发一个弹幕射击游戏（一）
  4. SBT30100VDC-ASEMI低压降肖特基二极管SBT30100VDC
  5. Unity 之 LayaAir 的集成开发小程序之工具下载和基本使用
  6. 重庆主城跑步地图|总有一条跑道适合你
  7. 降水量（python）
  8. 2021华为杯D题第四题完整代码
  9. ik分词器的下载和使用
  10. 四字节与浮点数之间的转换（c语言实现）