HTML

<el-form ref='from' :model="fromData">
<el-table ref="tableman"
border
v-loading='loading'
empty-text="没有相关数据"
max-height="400"
size="mini"
:data="fromData.domains"
align="left"
highlight-current-row
@selection-change="MaterilsChange"
:showOverflowTooltip="true"
style="min-width: 100%;min-height:100px;">
<el-table-column type="selection"
align="center"
width="55">
</el-table-column>
<el-table-column v-for="(item,index) in Materilscolumn"
:key="index"
:label="item.label"
align="center"
:prop="item.prop"
:min-width="item.minWidth">
</el-table-column>
<!--输入数量栏-->
<el-table-column label="数量"
align="center"
:min-width="90">
<template slot-scope="scope">
<el-form-item :prop="'domains.'+scope.$index+'.num'" :rules="fromaDataRules.num">
<el-input v-model="scope.row.num" @change='inputchange(scope.row,scope.$index)'></el-input>
</el-form-item>
</template>
 
</el-table-column>
</el-table>
<!-- 底部操作栏 -->
</el-form>
 
 
 
script
<script>
export default {
data() {
return {
dialogFormVisible:false,
fromData:{
domains:undefined
},
fromaDataRules:{
name:[{ required: true, message: '请输入活动名称', trigger: 'blur' },{validator:(rule, value, callback) =>{
let reg = /^[0-9]*$/
console.log(value)
if(!reg.test(value)){
callback(new Error('数量应为数字'));
}else if(value==0){
callback(new Error('数量应大于0'));
}else{
callback()
}
},trigger: 'blur'},],
desc:[ { required: true, message: '请填写活动形式', trigger: 'blur' }]
},
domains:[],
}
},
mounted(){
this.initDomains()
},
methods:{
initDomains(){
this.domains=[
{
name: undefined,
desc: undefined
},
{
name:undefined,
desc:undefined
}
]
},
init(){
this.dialogFormVisible = true
this.$set(this.fromData,'domains',this.domains)
},
submit(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
}
</script>
 
https://blog.csdn.net/xiaojun081004/article/details/82988549
 

table 里输入rules 验证的更多相关文章

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

    实际项目中的场景,需要在table里做表单的验证,如图效果: 其实问题关键就在于如何给el-form-item动态绑定prop :prop="'tableData.' + scope.$in ...

  2. Yii CModel中rules验证规则[转]

    array( array(‘username’, ‘required’), array(‘username’, ‘length’, ‘min’=>3, ‘max’=>12), array( ...

  3. Yii2 rules验证规则

    Rules验证规则:  required : 必须值验证属性||CRequiredValidator 的别名, 确保了特性不为空. [['字段名1','字段名2'],required]    //字段 ...

  4. Yii CModel中rules验证规则

    array( array(‘username’, ‘required’), array(‘username’, ‘length’, ‘min’=>3, ‘max’=>12), array( ...

  5. Java工作流引擎表单引擎之JS表单字段输入脚本验证

    关键字: 表单设计器, 字段验证. workflow,ccform, ccBPM. 工作流快速开发平台  工作流流设计  业务流程管理   asp.net 开源工作流bpm工作流系统  java工作流 ...

  6. 使用C#或javascript将Table里的数据导出到Excel

    原文:使用C#或javascript将Table里的数据导出到Excel Demo效果图: 用C#将Table数据导出Excel: 本方法已经将导出excel做成分部视图,引用时只需在视图中使用如下代 ...

  7. 阿里云提示WordPress“/wp-includes/http.php输入IP验证不当”的解决办法

    本文转自:https://www.liuzhishi.com/2931.html 标题: wordpress IP验证不当漏洞 简介: wordpress /wp-includes/http.php文 ...

  8. struts2系列(二):struts2参数传递错误、struts2的输入错误验证

    一.struts2参数传递错误 1. 基本数据类型的传递最好使用包装类,原因是struts 2.1之后使用基本数据类型如果参数为空会报错2. 日期参数的传递最好定义一个区域的属性(定义locale), ...

  9. C# 各种输入格式验证#各种输入格式验证

    /// <summary> /// 各种输入格式验证 /// </summary> public class ValidateUtil { private static Reg ...

随机推荐

  1. springboot情操陶冶-web配置(九)

    承接前文springboot情操陶冶-web配置(八),本文在前文的基础上深入了解下WebSecurity类的运作逻辑 WebSecurityConfigurerAdapter 在剖析WebSecur ...

  2. asp.net 仿微信端菜单设置

    第一步:添加引用文件 <link rel="stylesheet" href="~/assets/css/bootstrap.min.css"> & ...

  3. php中读取中文文件夹及文件报错

    php读取时出现中文乱码 一般php输出中出现中文乱码我们可用 header ('content:text/html;charset="utf-8"'); php中读取中文文件夹及 ...

  4. Dynamics 365-OnPremise V9 安装系统要求

    Dynamics 365 V9 OnPremise发布之后,博主率真地直接下载安装,首先就遇到了操作系统不支持的问题,但是通过CRM安装报错提示,发现给的链接参考信息也不对. document的链接调 ...

  5. 3D GIS 应用开发 —— 基于 Mapbox GL 的实践总结

    最近在折腾的 web 端的可视化项目,由于相关业务的需要,用到了 Mapbox 这一地图开发的神器.在此先奉上一个基于mapbox-gl实现的demo(来源:uber的deck.gl项目): 下面我们 ...

  6. Android Studio教程11-RecycleView的使用

    目录 1. RecyclerView 1.1. Add support library 1.2. 将RecyclerView添加到布局 1.3. 主actiivty中如何调用recycleview对象 ...

  7. crontab的笔试题随想

    最近看到一道题目,具体如下: 下列哪个是创建一个每周三01:00~04:00每3分钟执行一次的crontab指令? A: 1,4 3 /bin/bash /home/sijiaomao/ok.sh B ...

  8. memcached 学习

    memcached 是什么 特点 协议简单 基于 libevent 的事件处理 内置内存存储方式 memcached 不互相通信的分布式 启动 安装 依赖 libevent 安装命令 下载地址在这个网 ...

  9. jquery中Json操作

    在开发中,我们有可能拿到的不是全的json,而是一部分json格式的数据,这个时候我们需要将其强转为json对象 第一种方法:使用jquery中的$.parseJSON(),但是它对json数据格式的 ...

  10. IntelliJ IDEA 最新激活码

    C40PF37RR0-eyJsaWNlbnNlSWQiOiJDNDBQRjM3UlIwIiwibGljZW5zZWVOYW1lIjoiemhhbmcgeW9uZyIsImFzc2lnbmVlTmFtZ ...