elementUI表单嵌套表格并对每行进行校验

elementUI表单嵌套表格并对每行进行校验


elementUI 表单嵌套表格并进行校验。


效果展示

先看看这是不是需要的效果^_^

🪶🪶🪶

如图,ElementUI 表单里嵌套了表格,表格内每行能进行【保存】【新增】【编辑】【删除】【重置】等操作,同时可以对每行的某些字段进行校验(而不是整个表单校验!),这种需求很常见,所以记录下来。


代码链接
关键代码
  1. 表格数据
// 数据格式必须是【对象嵌套数组】,【form】绑定表单,【list】绑定表格
form: {
   
  // 表格数据
  list: [
      {
    id: 1, name: '小叶', age: '12', phone: '123456', show: true },
      {
    id: 2, name: '小李', age: '23', phone: '123457', show: true },
      {
    id: 3, name: '小林', age: '12', phone: '123458', show: true }
  ]
},
  1. 组件嵌套
  1. 添加字段校验的时候,格式必须写成这样的 :prop="'list.' + scope.$index + '.name'"

    这是 elementui 规定的格式,渲染后的结果为 list.1.name

  2. 每个字段要动态绑定表单的 rules 属性

  3. 如果不是以上的格式,会出错!!!

// 表单必须嵌套在表格的外面,表单必须绑定【rules】【ref】属性
<el-form :model="form" :rules="rules" ref="form">
   <el-table :data="form.list">
       <el-table-column prop="name" label="姓名">
           <template scope="scope">
  			// 每个字段
  • 7
    点赞
  • 35
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值