vue + el-form 实现的多层循环表单验证

    <div class="hljl-container">    <!--@blur="isRepeat(formItem, index, 'fieldName')"-->   </div>

 let _THAT export default { name: 'formMangeAdd', data() { return { formObj: { formDictExtendDoList: [] }, rules: { fieldName: [{ required: true, message: '请输入', trigger: 'blur' }, { validator: this.itemValidator, trigger: 'blur' }], value: [{ validator: (rule, value, callback) = > { // I'm a genius. let that = _THAT that.forceUpdate() let field = rule.field let arr = field.split('.') let index = +arr[1] let index1 = +arr[3] let _value = that.formObj.formDictExtendDoList[index].item[index1].value if (_value === '' || _value === null || _value === undefined) { callback(new Error('请输入')) } else { callback() } }, trigger: 'blur' }] } } }, beforeCreate() { _THAT = this }, created() { // 测试数据 let test = [{ id: 'id_1595641858891', // 唯一配置id fieldName: '字段名称', // 字段名称 item: [] }, { id: 'id_1595641858892', // 唯一配置id fieldName: '字段名称', // 字段名称 item: [] }, { id: 'id_1595641858893', // 唯<span style="color:transparent">本文来源gaodai#ma#com搞*!代#%^码网%</span>一配置id fieldName: '字段名称', // 字段名称 item: [{ id: 'item_id_1595641858891', // 唯一id value: '选项1' }, { id: 'item_id_1595641858892', // 唯一id value: '选项2' }] }] this.formObj.formDictExtendDoList = test }, methods: { /** * 重复性判断 **/ itemValidator: (rule, value, callback) = > { let that = _THAT that.forceUpdate() let field = rule.field let ruleArr = field.split('.') let index = +ruleArr[1] let type = ruleArr[2] if (value === '') { callback() return false } let arr = [] for (let i = 0; i <that.formObj.formDictExtendDoList.length; i++) { let formDictExtendDoListItem = that.formObj.formDictExtendDoList[i] let formDictExtendDoListFieldName = formDictExtendDoListItem.fieldName let formDictExtendDoListProjectName = formDictExtendDoListItem.projectName if (index !== i) { if (type === 'fieldName') { if (formDictExtendDoListFieldName !== '') { if (formDictExtendDoListFieldName === value) { arr.push(i) } } } } } if (arr.length !== 0) { if (type === 'fieldName') { callback(new Error('与配置' + (+arr[0] + 1) + '的字段名称重复')) setTimeout(function() { that.formObj.formDictExtendDoList[index].fieldName = '' }, 500) } } else { callback() } }, forceUpdate() { this.$forceUpdate() } } }