element-ui中有关联逻辑关系的表单校验

Question

具体的UI展示如下：

数据格式为：

data: [
    { label: '顺丰', value: '' },
    { label: '韵达', value: '' },
    { label: '圆通', value: '' },
    // ...动态数据，可能还有更多
]

校验规则及显示：

1. 必填校验；否则标红对应输入框，并在对应输入框下显示'请输入单量比例'
2. 格式校验；比例值必须是大于0的数字类型，否则标红对应输入框，在对应的输入框下显示‘输入值必须为正数’
3. 关联交验：各个单量比例之和必须为100，否则标红所有输入框，并在所有输入框下显示'比例之和必须为100%'

前两个没有关联逻辑的校验element-ui中有提供，但是关联关系的逻辑没什么思路，劳烦大牛有方法的提供一下具体的思路（最好能贴出代码），万分感谢！

采用一楼的方式只能校验当前项是否满足，无法将前面填写的置为合法

Answer 1

折腾了这么久，终于弄出来了，主要问题是：当校验条件满足时，需要重新校验所有表单的合理性

 <el-form :model="ruleForm" ref="form">
  <div v-for="(item, index) in ruleForm.proportion" :key="index">
    <el-form-item class="left label"
      :label="`${item.label}：`"
      :rules="rule"
      :prop="'proportion.' + index + '.value'">
      <el-input v-model.number="item.value"></el-input>%
    </el-form-item>
  </div>
</el-form>

// created初始化
this.rule = [
  { required: true, message: '请输入单量比例', trigger: 'blur' },
  { type: 'integer', min: 1, max: 100, message: '输入值必须介于1至100', trigger: 'blur' },
  { validator: this.checkSum, trigger: 'blur' },
];

// methods方法
checkSum(rule, value, callback) {
  let sum = 0;
  this.items.forEach((item) => {
    sum += item.value;
  });
  if (sum !== 100) {
    this.isLegal = false;
    callback(new Error('比例之和必须为100%'));
  } else {
    this.isLegal = true;
    callback();
  }
},

// watch监控
isLegal() {
  this.$refs.form.validate((validate) => {
    this.isLegal = validate;
  });
},

Answer 2

利用validator定义自己的验证规则，伪代码如下。

    [
        { 规则1... },
        { 规则2... },
        {
            validator: function(rule, value, callback) {

                sum(this.data) === 100 ? callback() : callback(new Error("比例之和必须为100%"));
            },
            trigger: 'blur'
        }
    ]