要实现你所描述的功能，可以使用 CSS 来设置一个条件样式。在展示 loanInfo 时，给它一个固定的高度；在不展示时，不设置高度。以下是修改后的代码示例：
<template>
<div :class="{'fixed-height': isCustomerNotFound}" class="loanInfo">
<a-row v-if="isCustomerNotFound" v-for="(item, index) in productRows" :key="index">
<a-col :span="12" v-if="isCustomerNotFound">
<a-form-item label="产品名称" style="width: 101%">
<a-input v-model:value="item.productName"></a-input>
</a-form-item>
</a-col>
<a-col :span="12" v-if="isCustomerNotFound">
<a-form-item label="借据号" style="width: 101%; margin-left: 5px;">
<a-input v-model:value="item.loanInfoCode"></a-input>
</a-form-item>
</a-col>
</a-row>
<span
v-if="productRows.length > 0 && isCustomerNotFound"
class="jiahao"
@click="addProductRow"
>
+
</span>
</div>
</template>
<style scoped>
.fixed-height {
height: 300px; /* 根据需要设定固定高度 */
}
</style>
<script>
// your script here...
export default {
data() {
return {
isCustomerNotFound: true, // 示例状态，依据实际逻辑来设定
productRows: [], // 示例数据，依据实际逻辑填充
};
},
methods: {
addProductRow() {
// 添加产品行的逻辑
},
},
};
</script>
修改点：
- CSS 类：添加了
.fixed-height样式用于设置固定高度。 - 动态类绑定：通过 Vue 的
:class动态绑定来控制是否应用.fixed-height样式。 - 保持原有结构和功能：其他部分保持不变，只是在外层 div 中添加了条件样式。
这样，当 isCustomerNotFound 为 true 时，外层 div 会有一个固定高度；当为 false 时，则不会限制高度，从而保证页面展示效果。你可以根据具体需求调整高度值。
内容由零声教学AI助手提供，问题来源于学员提问
