专栏首页前端之攻略Element表单嵌套数据验证

Element表单嵌套数据验证

除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则

假如数据格式如下:

      qiantaoForm:{
        name:"",
        age:"20",
        children:[{
          name:"jack1",
          age:"10"
        },{
          name:"jack2",
          age:"12"
        }]
      },
    <el-form :model="qiantaoForm" :rules="rules">
      <div>
        <div>主内容</div>
        <el-form-item label="名称" prop="name">
          <el-input v-model="qiantaoForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="qiantaoForm.age"></el-input>
        </el-form-item>
      </div>
      <div v-for="(item,index) in qiantaoForm.children" :key="index">
        <div>子内容--{{item.name}}</div>
        <el-form-item label="子名称" :prop="`children.${index}.name`" :rules="rules.name">
          <el-input v-model="item.name"></el-input>
        </el-form-item>
        <el-form-item label="子名称" :prop="`children.${index}.age`">
          <el-input v-model="item.age"></el-input>
        </el-form-item>
      </div>
    </el-form>
      rules: {
        name: [{ required: true, message: "输入内容", trigger: "blur" }],
        age: [{ required: true, message: "输入年龄内容", trigger: "blur" }]
      }

注意

子内容的属性为 prop="`children.${index}.name`" 或者 prop= "'children.' + index + '.value'" 因为el-form中的 :model="qiantaoForm" 是最外层结构

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Element Form表单含有嵌套的数据校验

    tianyawhl
  • 表格中的输入框验证

    tianyawhl
  • Element Table 增加搜索功能

    但是如果有多个table都要搜索,最好使用方法,因为可以传参数(tableData 表格数据;searchContent:输入框内容)

    tianyawhl
  • Element表单嵌套数据验证

    除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则

    一只图雀
  • Element Form表单含有嵌套的数据校验

    tianyawhl
  • vue2.0+Element-ui实战案例

    我们将会选择使用一些 vue 周边的库vue-cli, vue-router,axios,moment,Element-ui搭建一个前端项目案例,后端数据接口,...

    小周sri的码农
  • vuejs之springboot+vue+element-ui之添加信息

    点击导航一的页面二显示添加表单,表单可以去element官网上找一个,比如带验证的表单,此时PageTwo.vue

    绝命生
  • 【Vue.js】Vue.js组件库Element中的弹出框、气泡确认框、卡片和走马灯

    Popover 的属性与 Tooltip 很类似,它们都是基于Vue-popper开发的,因此对于重复属性,请参考 Tooltip 的文档,在此文档中不做详尽解...

    魏晓蕾
  • 看得见的数据结构Android版之单链表篇

    张风捷特烈
  • 猿实战10——动态表单之实现类目属性绑定

    猿实战是一个原创系列文章,通过实战的方式,采用前后端分离的技术结合SpringMVC Spring Mybatis,手把手教你撸一个完整的电商系统,跟着教程走下...

    山旮旯的胖子

扫码关注云+社区

领取腾讯云代金券