element el-form-item循环创建验证和自定义规则验证

项目需求

 实现效果

写一个一个简单dome

<template>
    <div class="body">

      <el-form ref="approvalDataResults" :model="approvalDataResults" label-width="150px" class="demo-ruleForm">
  
        <div v-for="(item, index) in approvalDataResults.PenaltyItemComponentData" :key="index">
          <el-divider>Component-{{ index + 1 }}</el-divider>
  
          <el-form-item label="选择器" :rules="rules.educationPenaltyItemId"
                        :prop="'PenaltyItemComponentData.' + index + '.educationPenaltyItemId'">
            <el-cascader
  
                v-model="item.educationPenaltyItemId"
                :options="options"
                :props="{ expandTrigger: 'hover' }"
                @change="selectChange(index)"
            ></el-cascader>
          </el-form-item>
  
          <el-form-item label="分值处理"
                        v-if="approvalDataResults.PenaltyItemComponentData[index].radio_show"
                        :rules="rules.radio_level" :prop="'PenaltyItemComponentData.' + index + '.radio_level'"
  
          >
            <el-radio-group v-model="item.radio_level" @change="radioChange(index)">
              <el-radio :label="item.radio_options[0].value">{{ item.radio_options[0].text }}</el-radio>
              <el-radio :label="item.radio_options[1].value">{{ item.radio_options[1].text }}</el-radio>
              <el-radio :label="item.radio_options[2].value">{{ item.radio_options[2].text }}</el-radio>
            </el-radio-group>
          </el-form-item>
  
          <el-form-item label="分数"
                        :rules="rules.cost_value" :prop="'PenaltyItemComponentData.' + index + '.cost_value'"
                        v-if="approvalDataResults.PenaltyItemComponentData[index].cost_show"
  
          >
            <el-input-number
  
                v-model="item.cost_value"
               ></el-input-number>
          </el-form-item>
  
        </div>
  
      </el-form>
      <el-button type="primary" @click="add">添加组件</el-button>
      <el-button type="primary" @click="remove">移除组件</el-button>
      <el-button type="warning" @click="submit">表单验证</el-button>
    </div>
  </template>
  
  <script>
  
  
  export default {
    data() {
  
      return {
  
  
        approvalDataResults: {
          PenaltyItemComponentData: []
        },
        options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [ {
            value: 'data',
            label: 'Data',
            children: [{
              value: 'pagination',
              label: 'Pagination 分页'
            }, {
              value: 'badge',
              label: 'Badge 标记'
            }]
          }, {
            value: 'notice',
            label: 'Notice',
            children: [ {
              value: 'message-box',
              label: 'MessageBox 弹框'
            }, {
              value: 'notification',
              label: 'Notification 通知'
            }]
          }, {
            value: 'others',
            label: 'Others',
            children: [{
              value: 'card',
              label: 'Card 卡片'
            }, {
              value: 'carousel',
              label: 'Carousel 走马灯'
            }, {
              value: 'collapse',
              label: 'Collapse 折叠面板'
            }]
          }]
        }],
        rules: {
          educationPenaltyItemId: [{required: true, message: '请选择选择器', trigger: 'change'}],
          radio_level: [
            {
              required: true, message: '请选择选择器', trigger: 'change'
            }
          ],
          cost_value: [
            {required: true, type: 'number', message: '请输入正确数据', trigger: 'blur'},
            {validator: this.validateCostValue, trigger: 'change'}
          ]
        }
      };
    }
    ,
    methods: {
      submit() {
        //测试代码验证
        var contest=true
        this.$refs['approvalDataResults'].validate(valid => {
          if (valid) {
            //通过
        
          } else {
            //不通过
       
            return false;
  
          }
        });
      },
        //自定义验证规则
      validateCostValue(rule, value, callback) {
        console.log(rule,"SDERER");
        //分割字符串
        let numberContent = this.extractNumber(rule.field);
        //获取一个对象
        let numberArrayObject = this.approvalDataResults.PenaltyItemComponentData[numberContent]
        console.log(numberArrayObject,"numberArrayObject")
        //选中的值
        let select;
        //需要现在三个值
        let radioOptions = numberArrayObject.radio_options;
        //输入框的值
        let flag;
        //单选框数据集合
        let numberArray = [];
        for (let a = 0; a < radioOptions.length; a++) {
          //获取值
          if (radioOptions[a].isSelect) {
            select = radioOptions[a].value
          }
          if (radioOptions[a].value == select) {
            flag = a;
          }
          numberArray.push(radioOptions[a].value)
        }
        //输入框数字
        let figure = value;
        if (figure > select) {
          callback(new Error('分数不能大于' + select));
        }
        if (flag == 0) {
          if (figure <= 0) {
            console.log("就来了")
            callback(new Error('分数不能大于0'));
          }
          else {
            callback();
          }
        }
        if (flag == 1) {
          if (figure < numberArray[flag - 1]) {
            callback(new Error('分数不能小于' + numberArray[flag - 1]));
          }
          else {
            callback();
          }
        }
        if (flag == 2) {
          if (figure < numberArray[flag - 1]) {
            callback(new Error('分数不能小于' + numberArray[flag - 1]));
          }
          else {
            callback();
          }
        }
  
  
      },
      //添加组件
      add() {
        var com_data = {
          educationPenaltyItemId: '',
          radio_options: [{
            text: '',
            value: '',
            isSelect: false,
  
          }, {
            text: '',
            value: '',
            isSelect: false
          }, {
            text: '',
            value: '',
            isSelect: false
          }],
          radio_level: null,
          radio_show: false,
          cost_value: 0,
          cost_show: false,
          cost_disabled: true
        }
        var a = this.RandomNumBoth(10, 20);
        var b = this.RandomNumBoth(a, a + 20);
        var c = this.RandomNumBoth(b, b + 20);
        com_data.radio_options[0].text = a
        com_data.radio_options[0].value = a
        com_data.radio_options[1].text = b
        com_data.radio_options[1].value = b
        com_data.radio_options[2].text = c
        com_data.radio_options[2].value = c
        this.approvalDataResults.PenaltyItemComponentData.push(com_data)
      },
      //删除组件
      remove() {
        if (this.approvalDataResults.PenaltyItemComponentData.length > 1) {
          var index = this.approvalDataResults.PenaltyItemComponentData.length
          this.approvalDataResults.PenaltyItemComponentData.splice(index - 1, 1)
        }
      },
      RandomNumBoth(Min, Max) {
        var Range = Max - Min;
        var Rand = Math.random();
        var num = Min + Math.round(Rand * Range); //四舍五入
        return num;
      },
      selectChange(index) {
        this.approvalDataResults.PenaltyItemComponentData[index].radio_show = true
      },
      radioChange(index) {
        this.approvalDataResults.PenaltyItemComponentData[index].cost_show = true
        var picd = this.approvalDataResults.PenaltyItemComponentData[index]
        picd.radio_options[0].isSelect = false
        picd.radio_options[1].isSelect = false
        picd.radio_options[2].isSelect = false
        console.log(picd)
        if (picd.radio_level == picd.radio_options[0].value) {
          picd.cost_value = picd.radio_level
          picd.radio_options[0].isSelect = true
  
        }
        if (picd.radio_level == picd.radio_options[1].value) {
          picd.cost_value = picd.radio_level
          picd.radio_options[1].isSelect = true
        }
        if (picd.radio_level == picd.radio_options[2].value) {
          picd.cost_value = picd.radio_level
          picd.radio_options[2].isSelect = true
        }
  
      },
      //分割字符串
      extractNumber(str) {
        // 使用正则表达式匹配数字部分
        let number = str.match(/\d+/);
        // 如果找到数字部分则返回，否则返回空字符串
        return number ? number[0] : '';
      },
    },
    mounted() {
      this.add()
    }
  
  
  }
  </script>
  <style>
  .body{
    width: 400px;
  }
  
  </style>