为了在编辑模式下完全隐藏整个 <div class="loanInfo">
,你可以在 <div>
的 v-if
指令中加入 !isEditing
的条件判断。这是一个简单的实现方式,可以根据你的需求进行调整。下面是修改后的代码:
<div
class="loanInfo"
v-if="isCustomerNotFound && productRows.length > 0 && !isEditing"
:style="{ height: '100px' }"
>
<a-row v-for="(item, index) in productRows" :key="index">
<a-col :span="12">
<a-form-item label="产品名称" style="width: 101%">
<a-input v-model:value="item.productName" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="借据号" style="width: 102%; margin-left: -5px">
<a-input v-model:value="item.loanInfoCode[index]" />
</a-form-item>
</a-col>
</a-row>
<span
v-if="productRows.length > 0"
class="jiahao"
@click="addProductRow"
>
+
</span>
</div>
改动说明:
- 使用
v-if
:在<div>
上添加了v-if
条件,使其仅在满足isCustomerNotFound
、productRows.length > 0
和!isEditing
的情况下显示。 - 去掉不必要的条件:移除了各个
<a-col>
内部的v-if
, 因为整个div
已经用一个条件进行控制。
这样,当 isEditing
为 true 时,整个贷款信息部分将不会被渲染。希望这个解决方案能满足你的需求!如果还有其他问题,请随时告知!
内容由零声教学AI助手提供,问题来源于学员提问