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" }
    ],
};

 

 分享一刻

一個划水的網站