element-ui —— v-for动态数据循环表单验证的处理方式

实例图

注意事项：
注意事项中每一步都要遵守，否则就不会生效！！！

1. 循环的数组和其他表单项在同一个<el-form>表单中
2. prop 改为 :prop，形式为 userList.${index}.name
3. 每一个循环中的<el-form-item>都需要加 :rules

dom格式

data数据：

      editForm: {
        orgCode: '', // 服务机构
        groupType: '', // 诊室类型
        groupName: '', // 诊室名称
        groupDescription: '', // 诊室简介
        enableStatus: 1, // 是否启用
        orgTagInfoList: [], // 标签
      },

rule规则：

      editRules: {
        orgCode: [{ required: true, message: '请选择服务机构', trigger: 'change' }],
        groupType: [{ required: true, message: '请选择诊室类型', trigger: 'change' }],
        groupName: [{ required: true, message: '请输入诊室名称', trigger: 'blur' }],
        enableStatus: [{ required: true, message: '请选择是否启用', trigger: 'change' }],
        tagIcon: [{ required: true, validator: checkImage, trigger: 'change' }],
        tagName: [{ required: true, message: '请输入标签名称', trigger: 'blur' }],
        displayOrder: [{ required: true, validator: checkFloor, trigger: 'change' }],
      },

感谢简友 https://www.jianshu.com/p/c4ab3322289c

如果你也经常使用element-ui 可持续关注 Element UI 入坑小结
如果本文对你有所帮助，感谢点一颗小心心，您的支持是我继续创作的动力！