当前位置: 首页 > news >正文

element 表格嵌套表单验证指定行

elementui表格嵌套动态表单,单独验证某一行输入项是否符合校验规则;

input动态绑定校验 :prop="'imgTable.' + scope.$index + '.bxName'"

<el-form :model="formTable" ref="formTable" inline size="small"><el-table :data="formTable.imgTable" :show-header="false" max-height="500"><el-table-column><template slot-scope="scope"><el-form-item :prop="'imgTable.' + scope.$index + '.bxName'" :rules="{required: true, message: '请输入报销项目', trigger: 'blur'}"><el-input v-model="scope.row.bxName" placeholder="请输入报销项目"></el-input></el-form-item></template></el-table-column></el-table>
</el-form>

 想要验证表单指定项需要使用 validateField,官网文档传参 Function(props: array | string, callback: Function(errorMessage: string)), array类型可以验证多个项。

let validarr = []
this.$refs['formTable'].validateField([`imgTable.${i}.bxName`, `imgTable.${i}.bxMoney`, `imgTable.${i}.bxDate`
],(err) => {validarr.push(!err)
})
console.log(validarr.every(item=>{return item == true}))

error返回值为rules中的message内容,如果验证通过返回空;这里 !err = true

需要注意的是,验证项传参为数组时,validateField会多次返回error,不会一次返回所有项的验证结果,如果在error callback中调用其他方法会多次调用;所以额外增加了validarr的遍历判断所有项都验证通过

http://www.lryc.cn/news/385522.html

相关文章:

  • CORE Mobility Errorr的调试
  • 基于weixin小程序乡村旅游系统的设计
  • 详解三种常用标准化 Batch Norm Layer Norm RMSNorm
  • 云计算运维工程师面试
  • 聚观早报 | iPhone 16核心硬件曝光;三星Galaxy全球新品发布会
  • web前端之文档流、浮动、定位详解
  • [JS]节点操作
  • 基于SpringBoot+Vue的论坛网站系统(带1w+文档)
  • 03逻辑门电路
  • 2毛钱的SOT23-5封装28V、1.5A、1.2MHz DCDC转换器用于LCD偏置电源和白光LED驱动等MT3540升压芯片
  • Zookeeper部署
  • 2.x86游戏实战-跨进程读取血量
  • element-plus 日期选择添加确定按钮
  • Redis优化之持久化
  • ubuntu22.04 编译安装libcurl C++ library
  • js函数闭包解析
  • 查看Oracle、MySQL、PostGreSQL中的依赖关系
  • 多线程(基础)
  • BUG cn.bing.com 重定向的次数过多,无法搜索内容
  • 【数据科学】学习资源汇总(不定时更新)
  • 完美解决ValueError: column index (256) not an int in range(256)的正确解决方法,亲测有效!!!
  • # 音频处理4_傅里叶变换
  • 提升网络速度的几种有效方法
  • @PathVariable注解的使用及源码解析
  • 服务器配置重点看哪些参数
  • WSL Ubuntu 如何设置中文语言?
  • 「51媒体」政企活动媒体宣发如何做?
  • K近邻回归原理详解及Python代码示例
  • idea 开发工具properties文件中的中文不显示
  • 让DroidVNC-NG支持中文输入