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

vue里el-form+el-table实现验证规则的写法

vue里el-form+el-table实现验证规则的写法

  • vue里el-form+el-table实现验证规则的写法

vue里el-form+el-table实现验证规则的写法

重点是因为使用el-form + el-table与单独使用el-form数据不同,前者是对象+json数组,后者是对象,导致了el-form-item绑定prop时的写法不同

以下是el-form+el-table实现验证规则的写法

<template ><el-form :model="form" ref="form" :rules="formRules" size="small"><el-table :data="form.userList"><el-table-column type="index" label="序号"></el-table-column><el-table-column label="姓名"><template slot-scope="{row, $index}"><el-form-item :prop="`userList.${$index}.name`" :rules='formRules.name'><el-input v-model="row.name"></el-input></el-form-item></template></el-table-column></el-table></el-form>
</template><script>
export default {data () {return {form: {userList: [{id: 1,name: '张三'},{id: 2,name: '李四'}]},formRules: {name: [{ required: true, message: '请输入姓名', trigger: 'blur' },{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }]}}},
}
</script>
http://www.lryc.cn/news/154321.html

相关文章:

  • K8S 基础概念学习
  • Java之正则表达式的详细解析
  • 移动端的屏幕分辨率与浏览器的视口宽度(视口大小)是两回事儿
  • 分布式 - 服务器Nginx:基础系列之Nginx静态资源优化配置指令sendfile | tcp_nopush | tcp_nodelay
  • Sentinel配置的blockHandler方法不生效
  • Mybatis的三种映射关系以及联表查询
  • 基于串口校时的数字钟设计
  • 支持向量机(二)
  • Arrays.asList 和 null 类型
  • 《论文阅读》用提示和释义模拟对话情绪识别的思维过程 IJCAI 2023
  • 【AI】机器学习——绪论
  • linux 查看端口占用
  • modernC++手撸任意层神经网络22前向传播反向传播梯度下降等23代码补全的例子0901b
  • tkinter控件样式
  • 【linux命令讲解大全】042. 深入了解 which 命令:查找和显示命令的绝对路径
  • 实战项目 在线学院之集成springsecurity的配置以及执行流程
  • 【ARM CoreLink CCI-400 控制器简介】
  • Linux xargs命令继续学习
  • 【广州华锐互动】数字孪生智慧楼宇3D可视化系统:掌握实时运行状态,优化运营管理
  • 20230904工作心得:集合应该如何优雅判空?
  • 使用Python进行健身手表数据分析
  • 什么是malloxx勒索病毒,服务器中malloxx勒索病毒了怎么办?
  • CocosCreator3.8研究笔记(六)CocosCreator 脚本装饰器的理解
  • docker login harbor http login登录
  • day5 qt
  • 【80天学习完《深入理解计算机系统》】第十三天 3.7 缓冲区溢出 attack lab
  • Hadoop生态之hive
  • AWS DynamoDB浅析
  • Linux安装ffmpeg
  • (18)不重启服务动态停止、启动RabbitMQ消费者