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

九月森林

于 2020-06-05 18:22:07 发布

阅读量8.8k

点赞数 16

分类专栏： Element 文章标签： vue

本文链接：https://blog.youkuaiyun.com/zhouqionger/article/details/106576030

版权

Element 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用Elementel-form根据【来款方式】的选择动态控制【来款银行】字段的必填状态。当选择银行来款时，来款银行字段变为必填，否则为非必填。

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

页面效果

当【来款方式】= 银行来款，【来款银行】必填，选择其他选项，非必填。
在这里插入图片描述

代码实现

注：rules判断要写在el-form-item中。

HTML

<el-col :span="8">
  <el-form-item label="来款方式" prop="fIncomeWay">
    <eIncomeWay v-model="form.fIncomeWay" />
  </el-form-item>
</el-col>
<el-col :span="8">
  <el-form-item
   label="来款银行"
   prop="fOppositeBank"
   :rules="form.fIncomeWay == 726 ? rules.fOppositeBank : [{required: false}]"
>
    <el-autocomplete
      class="inline-input"
      v-model="form.fOppositeBank"
      :fetch-suggestions="queryBankSearchAsync"
      value-key="fOppositeBank"
      :trigger-on-focus="false"
      :debounce="300"
      placeholder="请输入来款银行"
      :maxlength="50"
    ></el-autocomplete>
  </el-form-item>
</el-col>

JS

data(){
  return{
    rules: {
	 fIncomeWay: [
	   {
	     required: true,
	     message: "请选择来款方式",
	     trigger: ["blur", "change"]
	   }
	 ],
	 fOppositeBank: [
	   {
	     required: true,
	     message: "请输入来款银行",
	     trigger: "blur"
	   }
	 ]
	}
  }
}