vue 中给element-ui rules 根据条件添加必选与非必选的校验

 

有时候项目中需要校验的选项会在单选项中,选中时,需要校验,反之,不需要校验,如下图:卡背景项

 

 

实现代码:

1.给form表单添加rules

<el-form
      class="demo-form-inline"
      label-width="180px"
      ref="ruleForm"
      :rules="rules"
      :model="info"
    >
</el-form>

 

2.给需要更改项按条件单独添加rules

    <el-form-item
        :label="背景色："
        prop="levelIconColor"
        :rules="
 info.radio == '1' ? rules.levelIconColor : [{ required: false }]  6         "
      >
        <el-radio v-model="info.radio" label="1">卡背景</el-radio>
        <el-select
          clearable
          class="filter-item"
          v-model="info.levelIconColor"
          v-show="info.radio == '1'"
        >
          <el-option label="绿色" value="绿色"></el-option>
          <el-option label="红色" value="红色"></el-option>
        </el-select>
    </el-form-item>

 

3.在js中写rules

rules: any = {
    levelIconColor: [
      { required: true, message: '请选择颜色', trigger: "blur" }
    ],
};

 

 分享一刻

一个划水的网站