vue中表单验证规则：ruleValidate中一个字段是否必填由另一个字段决定

根据subjectNo的填写情况来动态设置softName的必填属性

1.html中写法

<template>
<el-form :model="formData" :rules="ruleValidate">
  <el-form-item label="课题编号" prop="subjectNo">
    <el-input v-model="formData.subjectNo"></el-input>
  </el-form-item>
  
  <el-form-item label="软件名称" prop="softName" :rules="dynamicSoftNameRule">
    <el-input v-model="formData.softName"></el-input>
  </el-form-item>
</el-form></template>

2.script中配置

import cloneDeep from 'lodash/cloneDeep'; // 导入lodash库中的cloneDeep方法

data() {
  return {
    ruleValidate: {
      subjectNo: [
        {
          required: true,
          message: "课题编号不能为空",
          trigger: "blur",
        },
      ],
      softName: [
        {
          required: false, // 初始状态下，softName 不需要填写
          message: "软件名称不能为空",
          trigger: "blur",
        },
      ],
    },
    formData: {
      subjectNo: "",
      softName: "",
    },
  };
},
computed: {
  dynamicSoftNameRule() {
    const rules = cloneDeep(this.ruleValidate.softName); // 使用cloneDeep进行深拷贝; // 创建一个规则数组的副本

    // 如果 subjectNo 填写了，则将 softName 设置为必填
    if (this.formData.subjectNo) {
      rules[0].required = true;
    }

    return rules;
  },
},

3.解释

在上述代码中，我们创建了一个名为dynamicSoftNameRule的计算属性。这个计算属性会根据subjectNo字段的填写情况动态设置softName字段的必填属性。

注意，我们使用了cloneDeep(...this.ruleValidate.softName)创建了一个softName规则数组的副本，以避免直接修改原始的ruleValidate对象。

然后，我们在模板中将dynamicSoftNameRule应用到softName字段的验证规则上：