乐趣区

关于element-ui:踩坑ElementUi中form组件的一些坑注意事项or巧妙用法

jiezi

前言

做我的项目用 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，目前临时是一枚前端搬砖工程师。

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

让灵魂管制本人的皮囊才是真正的自在！！！

退出移动版