element条件判断rules表单验证显示必填或非必填

最新推荐文章于 2025-04-14 13:48:04 发布

原创最新推荐文章于 2025-04-14 13:48:04 发布 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

element 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用Element UI库实现的表单设计案例，重点在于如何通过表单元素间的条件依赖来控制字段的显示与隐藏。具体展示了如何根据用户是否选择延长选项来动态显示或隐藏延长期限的选择框。

<el-col :xs="24" :sm="24" :lg="8">
  <el-form-item size="small" label="是否延长:" prop="data">
     <el-radio v-model="formData.data" label="1">是</el-radio>
     <el-radio v-model="formData.data" label="0">否</el-radio>
   </el-form-item>
 </el-col>
 <el-col :xs="24" :sm="24" :lg="8">
   <el-form-item label="延长期限"  prop="riqiDate" :rules="formData.data== 1 ? rules.riqiDate:[{required: false}]">
     <el-date-picker size="small" v-model="formData.riqiDate" type="date" placeholder="请选择延长期限" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
   </el-form-item>
 </el-col>