Vue Element UI动态生成的表单并校验

• 移动开发

效果图：

在这里插入图片描述

  <el-form-item
    prop="email"
    label="邮箱"
    :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
  >
    
  
  <el-form-item
    v-for="(item, index) in Form.domains"
    :label="'域名' + index"
    :key="item.key"
    :prop="'domains.' + index + '.name'"
    :rules="{
      required: true, message: '域名不能为空', trigger: 'blur'
    }"
  >
    删除
  
  
    提交
    新增域名
    重置

v-for 循环的数组名 Form.domains，在prop中，需要按照 :prop = 循环对象.下标.子属性，例：:prop=”‘domains.’ + index + ‘.name'”

 data() {
 	return {
    	Form: {
        	domains: [
          		{ name: ''}
          	],
          	email: ''
        },
	};
},

注意：

1、v-model 和 :model 的区别问题

v-model: 通常是用于 input 的双向绑定，但是它不会向子组件传递数据

:model: 表示绑定自定义的属性，它只是将父组件的数据传递给子组件，没有实现父子组件间的数据双向绑定

2、el-form-item上的prop名称、v-model的子属性 必须和 rules中的名称一致；

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/852b5e92b1.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐