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

html

<el-form :model="formObj" :rules="rules" ref="ruleForm">
  <el-form-item :label="'护理记录项目配置:'" label-width="180px">
    <template v-for="(formItem, index) in formObj.formDictExtendDoList">
      <div class="hljl-container" :key="formItem.id">
        <el-row>
          <el-col :span="8">
            <el-form-item
              :label="'字段名称:'"
              label-width="90px"
              :rules="rules.fieldName"
              :prop="'formDictExtendDoList.'+index+'.fieldName'"
            >
              <el-input
                v-model.trim="formItem.fieldName"
                type="text"
                :clearable="true"
                maxLength="100"
                placeholder="请输入"
              />
              <!--@blur="isRepeat(formItem, index, 'fieldName')"-->
            </el-form-item>
          </el-col>
          <template
            v-for="(child, index1) in formItem.item"
            v-show="formItem.type === 2"
          >
            <el-col :span="8" :key="child.id">
              <el-form-item
                :label="'选项' + (index1+1) + ':'"
                label-width="90px"
                :rules="rules.value"
                :prop="'formDictExtendDoList.'+index+'.item.'+index1+'.value'"
              >
                <el-input
                  v-model.trim="child.value"
                  @input="forceUpdate"
                  :clearable="true"
                  type="text"
                  maxlength="20"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
          </template>
        </el-row>
      </div>
    </template>
  </el-form-item>
</el-form>

js

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',
            // 唯一配置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()
        }
    }
}
返回文章列表 打赏
本页链接的二维码
打赏二维码
期待你的评论

3 条评论
  1. 王小大 黄金   王小大  

    最近也在折腾 element UI@(捂嘴笑)

  2. 服务器 白银   服务器  

    一起玩吧,老铁

  3. 席小欢 白银   席小欢  

    向贵站申请交换友情链接!站长同意的话请回复一下…

    名称:建站知道网
    本站网址: http://wozhidaole.com.cn/

    本站描述: | 新老站长都喜欢的技术性优秀网站!

    其他站长想与我站交换友情链接的,在此评论下回复或者在http://wozhidaole.com.cn/申请!