Element-Ui 实现动态必填表单项操作

实现表单项动态必填功能，目前看到方法有两种
1、在必填的 el-form-item 写两个一样的，一个有 rules 一个没，然后用 v-if 去动态判断
2、现在要说的是方法2，大部分网上看的都是用方法一的方式，而且基本都 copy 的文章

首先在 data() 数据定义中先定义个布尔值
projectIsRequired: false, // 是否是必填项

在html页面部分写动态的 rules

<el-form-item
    label="产品"
    prop="projectIsRequired"
    :rules="[{required: projectIsRequired, message: '请选择产品', trigger:' change'}]"
>
</el-form-item>

在 js 部分凡是有用到 projectIsRequired 的地方全部加一个 $nextTick 方法
ipProtocolChange(val){
    this.$nextTick(()=>{
        if(val == 1){
            this.projectIsRequired = true;
        }else if(val == 2){
            this.projectIsRequired = false;
            this.$refs['plugParamsFormRef'].clearValidate();
        }
    });
}