Element-ui 动态form表单添加和动态验证规则

<el-form :model="form" ref="form" label-width="110px">
  <div v-for="(item, index) in form.grade_account_list" :key="index" class="account-info">
    <el-form-item label="抽佣账户" 
          :prop="'grade_account_list.' + index + '.staff_id'"   //注意这里的命名格式：'form中的数组字段名称.' + index + '.要绑定的model值名称'
          :rules="form.is_commission == 1
            ? {required: true, message: '请选择是否抽佣', trigger:  ['blur', 'change']}
            : {required: false}">
      <el-select v-model="item.staff_id" placeholder="请选择抽佣方" style="width: 200px;">
          <el-option v-for="(item, index) in splitAccountList" :key="index" :label="item.stage_name" :value="item.staff_id"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="抽佣金额" 
          :prop="'grade_account_list.' + index + '.commission_amount'"
          :rules="form.is_commission == 1
            ? {required: true, message: '请输入抽佣金额', trigger:  ['blur', 'change']}
            : {required: false}">
      <el-input type="number" v-model.trim="item.commission_amount" min="0"
          placeholder='请输入抽佣金额' class="input-width">
      </el-input>
    </el-form-item>
  </div>
</el-form>

data: function () {
  return {
    form: {
      grade_name: '',
      charge_amount: '',
      grade_account_list: [],
    },
  }
},

methods: {
  addAccount(){
    this.form.grade_account_list.push({
      staff_id: '',
      commission_amount: '',
    })
  },
                
  delAccount(item){
    this.form.grade_account_list = this.form.grade_account_list.filter(
      vo => vo.index != item.index
    )
  }

}