【踩坑】ElementUi中form组件的一些“坑”（注意事项or巧妙用法）

前言

做项目用ElementUI组件的时候，因为有些业务需求，官方不可能有我们项目中业务所有的例子说明，所以在这里纪录了一下平常在写项目的时候遇到的一些问题。

一、form组件的 model 的数据类型必须是 Object

问题背景

有个这样的需求：做一个循环表单，表单的双向绑定的值应该就是一个数组，表单属性 :model 的值就需要写成 :model="类.数组" ，如果直接把数组赋给它，写成这样 :model="数组" 就会报错，如下图所示

正确示例

//数据
formData: {
    id: 1,
    name: '湖南师范大学',
    gradeList: [
      {
        id: 1,
        name: '一年级',
        classList: [
          {
            id: 1,
            name: '01班'
          },
          {
            id: 2,
            name: '02班级'
          }
        ]
      }
    ]
  }

<!-- form表单中model的值 formData 必须为 Object 类型 -->
  <el-form :model="formData" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <template v-for="(grade, index) in formData.gradeList">
      <el-form-item label="班级名字" :prop="'gradeList.' + index + '.name'"
        :rules="{required: true, message: '请输入年级',trigger: 'blur'}">
        <el-input v-model="grade.name"></el-input>
      </el-form-item>
    </template>
  </el-form>

二、循环表单中的表单验证问题

有时候有这样的需求：一个学校相关信息的输入表单里面嵌套着各个年级信息的表单（单层循环表单），一个年级里面又有多个班级信息的表单（多层嵌套表单），这个时候对里面的各个输入框做表单验证，该怎么做呢？把prop属性里面的匹配写对就可以了，大致是下面这个写法：

//数据
formData: {
    id: 1,
    name: '湖南师范大学',
    gradeList: [
      {
        id: 1,
        name: '一年级',
        classList: [
          {
            id: 1,
            name: '01班'
          },
          {
            id: 2,
            name: '02班级'
          }
        ]
      }
    ]
  }

1、单层循环表单

 <!-- prop是这样写 :prop="'gradeList.' + index + '.name'" -->
  <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <template v-for="(grade, index) in formData.gradeList">
      <el-form-item label="年级名字" :prop="'gradeList.' + index + '.name'"
        :rules="{required: true, message: '请输入年级',trigger: 'blur'}">
        <el-input v-model="grade.name"></el-input>
      </el-form-item>
    </template>
  </el-form>

2、双层循环表单

 <!-- 第二层的 :prop 是这样写 :prop="'gradeList.' + index + '.name'" -->
  <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <template v-for="(grade, index) in formData.gradeList">
      <el-form-item label="年级名字" :prop="'gradeList.' + index + '.name'"
        :rules="{required: true, message: '请输入年级',trigger: 'blur'}">
        <el-input v-model="grade.name"></el-input>
      </el-form-item>
      <template v-for="(class, classIndex) in grade.classList">
        <el-form-item label="班级名字" :prop="'gradeList.' + index + '.classList.' + classIndex + '.name'"
          :rules="{required: true, message: '请输入班级',trigger: 'blur'}">
          <el-input v-model="class.name"></el-input>
        </el-form-item>
      </template>
    </template>
  </el-form>

依此类推，多层循环表单也可以按照双层循环表单中 prop 属性的格式来写。

如果有遇到组件中的其他问题或者注意事项可以在评论区留言，一起分享。

未完待续...

写在最后

我是AndyHu，目前暂时是一枚前端搬砖工程师。

文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注

让灵魂控制自己的皮囊才是真正的自由！！！