<template> <div> <el-form :model="form" :rules="form" label-width="80px"> <el-form-item label="姓名"> <el-input v-model="form.name"></el-input> </el-form-item> </el-form> </div></template><script> export default { name: 'Father', data () { return { form: { name: 'Tim' } } } }</script>el-form 设置了 :model、:rules 两个属性，:rules 似乎是后续表单校验时需要使用，那 :model 属性的作用是什么呢？官方文档将 el-form 的 model 属性描述为"表单数据对象"，但如果不配置该属性，仅通过 v-model="form.name" 为表单域设置值已经可以实现数据绑定，为什么还要为 el-form 配置 model 这个属性呢？---------------------------------- 分割线 -----------------------------------------------<template> <div> <el-form :rules="rules" label-width="80px"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> </el-form> </div></template><script> export default { name: 'App', data () { return { form: { name: 'Tim' }, rules: { name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }] } } } }</script>
2 回答
wsb200514
TA贡献2条经验 获得超2个赞
以下表单指input或el-input这些，而el-form或el-form-item则会直接写明。
1、确实，在表单中有个v-model绑定后，el-form的model有没有一点都不影响，你可以删除不写。
2、目前el-form的model主要用表单验证的，也就是配合el-form的rules和el-form-item的prop来使用的。不信的话，你可以增加一个rules和prop(为了调用验证方法，也el-form也加一个ref属性，相当于id或者class选择器的意思)，但是不写model，然后验证的话，会提示缺少model，导致无法验证成功。
所以el-form的model干嘛用的？目前看来主要是为了配合表单验证。里面的逻辑大概是，在el-form-item上写一个prop，这个prop左手对应着数据源（即用model.prop找到对应的数据源），右手对应着验证规则（即用rules.prop找到对应的规则）。然后就快乐地验证去了。
至于为什么不能将el-form的model+el-form-tem的prop这样的组合和表单中的v-model的用法合二为一，最直观的原因就是：这几个玩意是加在不同的标签上的啊，一种是针对表单的双向绑定，一种是针对el-form和el-form-item的验证（虽然这个验证的数据源最终就是表单那边双向绑定得来的）；其次，你感觉一下，一边是利用双向绑定提供数据，另一边是拿到数据和规则进行验证，这两边没有很死板地捆绑在一起啊，类似于耦合度不高，未来自定义或者修改的话会方便很多。
添加回答
举报
0/150
提交
取消