VUE + element 的表单验证rules 动态校验

以下代码仅供参考 如果有更好的解决结果 可以发在评论区学习

html代码部分 

<el-dialog :title="title" :visible.sync="isShow" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="申请状态" prop="afterState">
           <el-select v-model="form.afterState" @change="chakedState(form.afterState)" clearable placeholder="申请状态">
          <el-option label="已拒绝" value="已拒绝" />
           <el-option label="售后中" value="售后中" />
           <el-option label="仅退款" value="仅退款" />
         </el-select>
        </el-form-item>
             <el-form-item label="填写物流"  prop="afterMust">
           <el-select v-model="form.afterMust" clearable @change="chaked(form.afterMust)"  placeholder="是否需要填写物流">
          <el-option label="是" value="0" />
           <el-option label="否" value="1" />
         </el-select>
        </el-form-item>
        <div v-show="form.afterMust == '0'">
          <el-form-item label="姓名" prop="acAdminName">
             <el-input v-model="form.acAdminName" placeholder="请输入商家姓名" />
        </el-form-item>
            <el-form-item label="手机号" prop="acAdminPhone">
               <el-input v-model="form.acAdminPhone" placeholder="请输入商家手机号" />
        </el-form-item>
            <el-form-item label="收货地址" prop="acAdminAddress">
               <el-input v-model="form.acAdminAddress" placeholder="请输入商家收货地址" />
        </el-form-item>
        <el-form-item label="详细地址" prop="acAdminFullAddress">
           <el-input v-model="form.acAdminFullAddress" placeholder="请输入商家详细地址" />
        </el-form-item>
        </div>
        <el-form-item v-show="form.afterState == '已拒绝'" label="拒绝理由" prop="reasonsForRefusal">
          <el-input v-model="form.reasonsForRefusal" placeholder="拒绝理由" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

js的data 部分

   // 表单参数
      form: {
        afterId:"",
        reasonsForRefusal:"",
        afterState:"",
        orderCode:"",
        salesState:"",
        afterMust:"",
        acAdminName:"",
        acAdminPhone:"",
        acAdminAddress:"",
        acAdminFullAddress:"",
      },
      // 表单校验
        rules: {
          afterState:[
            { required: true, message: "申请状态不能为空", trigger: "blur" }
          ],
            afterMust:[
            { required: true, message: "填写物流不能为空", trigger: "blur" }
          ],
            acAdminName:[
            { required: true, message: "商家姓名不能为空", trigger: "blur" }
          ],
            acAdminPhone:[
            { required: true, message: "手机号不能为空", trigger: "blur" }
          ],
            acAdminAddress:[
            { required: true, message: "收货地址不能为空", trigger: "blur" }
          ],
            acAdminFullAddress:[
            { required: true, message: "详细地址不能为空", trigger: "blur" }
          ],
            reasonsForRefusal:[
            { required: true, message: "拒绝理由不能为空", trigger: "blur" }
          ],
        }

 methods 部分

methods: {
    // 动态表单验证
    chakedState(data){
      
   console.log(data);
         switch (data) {
          case '已拒绝':
              this.rules.reasonsForRefusal[0].required = true
            break;
         default:
           this.rules.reasonsForRefusal[0].required = false 
            break;
        }
    },
    // 动态表单验证
    chaked(data){
        switch (data) {
          case '0':
              this.rules.acAdminName[0].required = true
              this.rules.acAdminPhone[0].required = true
              this.rules.acAdminAddress[0].required = true
              this.rules.acAdminFullAddress[0].required = true
            break;
           case '1':
              this.rules.acAdminName[0].required = false
              this.rules.acAdminPhone[0].required = false
              this.rules.acAdminAddress[0].required = false
              this.rules.acAdminFullAddress[0].required = false
            break;  
        }
    },
}