vue elementui rules根據選擇條件判斷下一個選項必填和非必填的校驗

效果圖以下

選擇H5 link,HyperLink爲必填項

選擇non-clickable,HyperLink爲非必填項

代碼以下：

<el-row>
              <el-col :span="10" :offset="1">
                  <el-form-item label="Content Type" prop="type">
                      <el-select v-model="formInfo.type" placeholder="select" size="small" @change="handleChange">
                        <el-option
                          v-for="item in typeOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                  </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10" :offset="1" v-show="formInfo.type === 1">
                  <el-form-item label="HyperLink" prop="target" :rules="formInfo.type === 1?formRule.target:[{ required: false}]">
                      <el-input class="form-input" v-model="formInfo.target" clearable size="small" placeholder="Please select related content" @focus="selectArticle"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="10" :offset="1" v-show="formInfo.type === 0">
                <el-form-item label="HyperLink" prop="target" :rules="formInfo.type === 0 ?formRule.target:[{ required: false}]">
                    <el-input class="form-input" v-model="formInfo.target" maxlength="40" clearable size="small" placeholder="Contextual Buying Approach"></el-input>
                </el-form-item>
            </el-col>
            </el-row>

formRule: {
                    title: [
                        { required: true, message: 'Please enter Banner title', trigger: 'blur' },
                        { min: 1, max: 50, message: '1 to 50 characters', trigger: 'blur' }
                    ],
                    img: [
                        { required: true, message: 'Please select a cover image', trigger: 'change' }
                    ],
                    type: [
                        { required: true, message: 'Please select a jump type', trigger: 'change' }
                    ],
                    target:[
                      { required: true, message: 'Please write a content', trigger: 'blur' }
                    ] 
                },

formRule是表單綁定的rules字段

在須要判斷是否非必填項上綁定rules屬性來判斷是否須要必填，以下圖