使用场景
表单控件需要根据条件动态进行必填项验证,如果用v-if来写,有点繁琐,而且会造成很多重复代码。
比如下面的就用了v-if
的方式,为了解决属性prop是否有的问题(elementUI):
<!-- 所有渠道,类型为自然人时非必填,否则必填 -->
<el-form-item label="代理人单位:" prop="agentCompany" v-if="dialogNewform.agentType == 0">
<el-input v-model="dialogNewform.agentCompany" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="代理人单位:" v-else>
<el-input v-model="dialogNewform.agentCompany" auto-complete="off"></el-input>
</el-form-item>
其实可以通过v-bind实现,之前也可以:
比如下面的条件,该表单项必填:
代理人渠道是15,且代理人类型是1的
渠道是16的,且代理人类型是2的,代理人职务为必填
<el-form-item label="代理人职务:" :prop="(dialogNewform.orgId == 15 && dialogNewform.agentType === '1' ? 'agentDuties' : '') || (dialogNewform.orgId == 16 && dialogNewform.agentType === '1' ? 'agentDuties' : '') || (dialogNewform.orgId == 16 && dialogNewform.agentType === '2' ? 'agentDuties' : '')">
<el-input v-model="dialogNewform.agentDuties" auto-complete="off"></el-input>
</el-form-item>
简单点的是这样:
<!-- 所有渠道,类型为0时非必填,否则必填 -->
<el-form-item label="代理人单位:" :prop="dialogNewform.agentType == 0 ? '' : 'agentCompany'">
<el-input v-model="dialogNewform.agentCompany" auto-complete="off"></el-input>
</el-form-item>