Element UI 表格渲染条件控制:'是'与'否'选项的显示
Element UI 表格渲染条件控制:'是'与'否'选项的显示
根据给出的代码,可以推断出表格只会在'是否关联账套'选择'是'的情况下进行渲染。这是因为在代码中使用了条件渲染指令 v-if 来判断'是否关联账套'的值是否为'1',只有在值为'1'时,才会渲染'账套名称'的表单项。如果'是否关联账套'的值为其他值或为空,则不会渲染'账套名称'的表单项。
代码示例:
<el-form-item label='是否关联账套:'>
<el-radio-group v-model='form.accountRelStatus'>
<el-radio
v-for='dict in accountRelStatusOptions'
:key='dict.dictValue'
:label='dict.dictValue'
>
{{ dict.dictLabel }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
v-if='form.accountRelStatus == '1''
label='账套名称:'
prop='auditedAccountsId'
>
<el-select
v-model='form.auditedAccountsId'
filterable
placeholder='请选择账套'
@change='change($event)'
:loading='loading'
style='width: 280px'
>
<el-option
v-for='item in options'
:key='item.accountsId'
:label='item.accountsName'
:value='item.accountsId'
>
</el-option>
</el-select>
</el-form-item>
解释:
v-if='form.accountRelStatus == '1'': 该指令判断form.accountRelStatus的值是否为 '1',只有当值为 '1' 时,才会渲染el-form-item内的 '账套名称' 表单项。v-model='form.accountRelStatus': 该指令将el-radio-group的选中值绑定到form.accountRelStatus属性,用于控制 '是' 或 '否' 选项的选择。
总结:
通过使用 v-if 指令可以实现表格中不同选项的条件渲染,根据用户选择 '是' 或 '否' 来展示不同的内容,提高用户体验和表格的灵活性和可定制性。
原文地址: https://www.cveoy.top/t/topic/pkkm 著作权归作者所有。请勿转载和采集!