el表单元素rule使用三元表达式

场景

表单中字段要根据其他字段的值进行必填控制
当付款类型为某值时,年利率字段为必填项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<el-col :span="8">
<el-form-item
label="付款类型"
prop="new_paymenttype.Value"
:rules="[{ required: true, message: ' ' }]"
>
<rt-picklist
v-model="editForm.new_paymenttype.Value"
entity="new_contract"
attribute="new_paymenttype"
:disabled="disabledform"
></rt-picklist>
</el-form-item>
</el-col>

<el-col :span="8">
<el-form-item label="年利率(%)"
prop="new_interestrate"
:rules="(this.editForm.new_paymenttype.Value==5||this.editForm.new_paymenttype.Value==6)?[{ required: true}]:[{ required: false}]"
>
<el-input
v-model="editForm.new_interestrate"
:disabled="disabledform"
type="number"
></el-input>
</el-form-item>
</el-col>

解决方案

:rules=”(this.editForm.new_paymenttype.Value==5||this.editForm.new_paymenttype.Value==6)?[{ required: true}]:[{ required: false}]”
Form-Item Attributes el表单元素属性
required 是否必填,如不设置,则会根据校验规则自动生成
rules 表单验证规则

1
2
3

(this.editForm.new_paymenttype.Value==5||this.editForm.new_paymenttype.Value==6)?[{ required: true}]:[{ required: false}]

延伸

: 符号

“:” 是指令 “v-bind”的缩写
v-bind即为数据绑定,将变量对应元素绑定起来,使元素动态获取变量值

1
2
3
4
5
6

<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>

@ 符号

“@”是指令“v-on”的缩写
v-on用于监听 DOM 事件

1
2
3
4
5
6

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>

vue模板语法

模板语法