Vue + Element-UI 子组件表单校验功能

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

<template>
  <div>
    <el-form>
      <el-form-item v-for="(parameter, index) in choiceParameters" :key="'parameter' + index">
        <el-card class="box-card" style="width: 80%">
          <div slot="header" class="clearfix">
            <span>{{ $t('pipeline.choiceParameter') }}</span>
            <el-button
              v-if="choiceParameters.length > 0"
              type="danger"
              size="mini"
              icon="el-icon-delete"
              circle
              style="float: right"
              @click.prevent="removeParameter(index)"/>
          </div>
          <div>
            <el-form ref="choiceParameterForm" :model="parameter" :rules="choiceParameterFormRules" label-position="left" size="mini">
              <el-form-item :label="$t('pipeline.parameterName')" size="mini" prop="name">
                <el-input v-model="parameter.name" :clearable="true"/>
              </el-form-item>
              <el-form-item :label="$t('pipeline.parameterValue')" size="mini" prop="defaultValue">
                <el-input v-model="parameter.defaultValue" :placeholder="$t('pipeline.choiceParameterOptions')" :clearable="true"/>
              </el-form-item>
              <el-form-item :label="$t('pipeline.parameterDescription')" size="mini">
                <el-input v-model="parameter.description" :clearable="true" type="textarea"/>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-form-item>
      <!--
      <span style="margin-left: 450px;">
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-plus"
          circle
          @click.prevent="addParameter()"/>
      </span>
      -->
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'ChoiceParameters',
  props: {
    choiceParameters: {
      type: Array,
      required: false,
      default() {
        return [];
      }
    }
  },
  data() {
    const validateChoiceParameters = (rule, value, callback) => {
      if (value) {
        if (value.indexOf(',') === -1) {
          return callback(new Error(this.$t('pipeline.validateChoiceParameter')));
        }
        return callback();
      } else {
        return callback(new Error(this.$t('pipeline.nullWarning')));
      }
    };
    return {
      choiceParameterFormRules: {
        name: [{
          required: true, message: this.$t('pipeline.nullWarning'), trigger: ['change', 'blur']
        }],
        defaultValue: [
          {
            required: true, message: this.$t('pipeline.nullWarning'), trigger: ['change', 'blur']
          },
          {
            validator: validateChoiceParameters, required: true, trigger: ['change', 'blur']
          }
        ]
      },
    };
  },
  methods: {
    validateForm() {
      let flag = true;
      for (let i = 0; i < this.choiceParameters.length; i++) {
        this.$refs.choiceParameterForm[i].validate((valid) => {
          if (!valid) {
            flag = false;
          }
        });
      }
      return flag;
    },
    addParameter() {
      this.choiceParameters.push({
        name: '',
        description: '',
        defaultValue: ''
      });
    },
    removeParameter(index) {
      this.choiceParameters.splice(index, 1);
    }
  }
};
</script>

<style scoped>

</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<template>
    <el-form-item>
      <choice-parameters ref="choice-parameters" :choice-parameters="properties.choiceParameters"></choice-parameters>
    </el-form-item>
</template>

<script>
export default {
  name: 'Pipeline',
  components: {
    'choice-parameters': ChoiceParameters
  },
  data() {
    return {}
  }
  methods: {
    handle() {
      if (this.$refs['choice-parameters'].validateForm()) {
          // do something     
      }
    }
  }
}
</script>