el-form循环el-form-item多个类型input并进行动态验证_el-form-item循环

<el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            hide-required-asterisk
            :label-position="labelPosition"
            label-width="70px"
          >
            <el-form-item
              v-for="(labelItem, indexs) in ruleForm.formList"
              :key="indexs"
              :label="title == '修改类型名称' ? '类型名称' : labelItem.name"
              :prop="'formList.' + indexs + '.value'"
              :rules="[ 
                {
                  required: labelItem.must,
                  message: '请输入' + labelItem.name,
                  trigger: ['blur'],
                },
                {
                  validator:
                    labelItem.type == 3
                      ? checkPhone
                      : labelItem.type == 4
                      ? checkEmil
                      :labelItem.type == 5
                      ? checkNum
                      : '',
                  trigger: ['blur'],
                },
              ]"
            >
              <el-input
                v-if="labelItem.type != 2"
                class="label-input"
                :type="
                  labelItem.type == 3 || labelItem.type == 5 ? 'number' : 'text'
                "
                :placeholder="
                  title == '修改类型名称'
                    ? '请输入类型名称'
                    : '请输入' + labelItem.name
                "
                v-model="labelItem.value"
                autocomplete="off"
              >
              </el-input>
              <el-date-picker
                v-if="labelItem.type == 2"
                style="width: 100%"
                v-model="labelItem.value"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择到期时间"
                default-time="12:00:00"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
           <div slot="footer" class="dialog-footer">
            <el-button
              class="btn"
              type="primary"
              @click="submitForm('ruleForm', index, item)">提交</el-button>
            <el-button class="btn" @click="closeForm('ruleForm', index, item)">取消</el-button>
          </div>

data(){
    return{
        title:'添加卡片',
        ruleForm: {
            name: "",
            tagClassifyId: "",
            id: null,
            formList: [
                {
                    "disable": true,
                    "name": "卡片名称",
                    "must": true,
                    "id": "",
                    "type": 1,
                    "value": "12"
                },
                {
                    "disable": false,
                    "name": "电话",
                    "must": true,
                    "id": "",
                    "type": 1,
                    "value": ""
                },
                {
                    "disable": false,
                    "name": "邮箱",
                    "must": false,
                    "id": "",
                    "type": 1,
                    "value": ""
                }
            ],
          },
    }
 
},
methods: {
    checkPhone(rule, value, callback) {
      if (!value || vaildPhone(value)) return callback();
      return callback(new Error("请输入正确的格式"));
    },
    checkEmil(rule, value, callback) {
      if (!value || validMailbox(value)) return callback();
      return callback(new Error("请输入正确的格式"));
    },
    checkNum(rule, value, callback){
      if(!value || validNum(value)) return callback();
      return callback(new Error("请输入正确的格式"));
    },
    submitForm(ruleForm, index, item) {
      this.$refs[ruleForm][index].validate(async (valid) => {
        if (valid) {
            createLabel({
              tagClassifyId: item.id,
              formList: item.filedType,
            }).then((res) => {
              if (res.code == 0) {
                this.$modal.msgSuccess("添加成功");
                item.addFlag = false;
                this.getTagListByName(this.labelVal);
              } else {
                this.$modal.msgWarning("添加失败");
              }
            });
            Object.assign(this.$data.ruleForm, this.$options.data().ruleForm);
        }
      });
    },
    closeForm(ruleForm, index, item) {
      this.$refs[ruleForm][index].resetFields();
      item.addFlag = false;
    },
 
}