likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 325

前言

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

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

问题背景

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

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

正确示例

//数据
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,目前暂时是一枚前端搬砖工程师。

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

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