【踩坑】ElementUi中form组件的一些“坑”（注意事项or巧妙用法）
【踩坑】ElementUi中form组件的一些“坑”（注意事项or巧妙用法）
andyhu
发布于 2022-12-14 15:13:03
发布于 2022-12-14 15:13:03
代码可运行
运行总次数：0
代码可运行
前言
做项目用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，目前暂时是一枚前端搬砖工程师。
文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注
让灵魂控制自己的皮囊才是真正的自由！！！
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-09-10，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
