效果图以下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