Element el-form根据选择条件动态控制表单必填项

最新推荐文章于 2024-08-27 10:20:49 发布

前端攻城狮·左大

最新推荐文章于 2024-08-27 10:20:49 发布

阅读量3.6k

点赞数 3

分类专栏： CSS JavaScript 文章标签： html5 css

本文链接：https://blog.youkuaiyun.com/weixin_46719868/article/details/122450378

版权

JavaScript 同时被 2 个专栏收录

32 篇文章

订阅专栏

CSS

15 篇文章

订阅专栏

本文介绍了一个使用Element UI实现的表单验证案例，展示了如何根据不同条件设置字段的必填性。通过选择不同的支付方式来动态调整客户选择项的验证规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

业务场景：当select=A时 C非必填反之当select=B时C必填
在这里插入图片描述

在这里插入图片描述
代码实现

  <el-form-item label="支付方式 :" :rules="[{ required: true, message: '请选择支付方式', trigger: 'change' }]" prop="couponBatchPaytype">
            <el-select @change="changeCouponBatchPaytype" clearable v-model="ruleForm.couponBatchPaytype" placeholder="请选择支付方式" style="width:30%">
              <el-option label="明点转账" value="0"></el-option>
              <el-option label="暗点抵扣" value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="选择客户:" prop="custrelCode" :rules="ruleForm.couponBatchPaytype == 1 ? rules.custrelCode : [{ required: false }]">
            <el-select @change="ysMakeActive" v-model="value2" value-key="userinfoCode" style="width:30%" placeholder="请选择客户" clearable>
              <el-option v-for="item in userArr2" :key="item.userinfoCode" :label="item.userinfoCompname" :value="item"> </el-option>
            </el-select>
          </el-form-item>

data部分

  rules: {
        custrelCode: [{ required: true, message: '请选择客户', trigger: 'change' }],
      },