效果圖以下javascript
選擇H5 link,HyperLink爲必填項html
選擇non-clickable,HyperLink爲非必填項java
代碼以下:ui
<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字段spa
在須要判斷是否非必填項上綁定rules屬性來判斷是否須要必填,以下圖3d