场景
表单中字段要根据其他字段的值进行必填控制
当付款类型为某值时,年利率字段为必填项
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模板语法
模板语法