在tab1中弹窗内不显示: <label for="standard">检查标准:</label> <input type="text" id="standard" v-model="selectedItem.check_sta" />
时间: 2024-10-25 16:07:09 浏览: 19
js实现tab切换效果实例
为了在 `tab1` 中的弹窗内不显示 `<label for="standard">检查标准:</label>` 和对应的输入框,你需要从模态窗口的表单中移除这两行代码。具体来说,可以在 `modal-content` 部分的 `v-if="currentTab === 'tab1'"` 条件下隐藏这些元素。
以下是修改后的代码:
```html
<!-- 弹窗组件 -->
<view v-if="isModalVisible" class="modal">
<view class="modal-content">
<h3>详细信息</h3>
<form @submit.prevent="updateItem">
<label for="id">ID:</label>
<input type="text" id="id" v-model="selectedItem.Main_task_Nopri" readonly />
<label for="name">检查区域:</label>
<input type="text" id="name" v-model="selectedItem.AREA_NAME" />
<!-- 根据当前标签页决定是否显示检查标准 -->
<template v-if="currentTab !== 'tab1'">
<label for="standard">检查标准:</label>
<input type="text" id="standard" v-model="selectedItem.check_sta" />
</template>
<label for="compliance">是否符合:</label>
<select id="compliance" v-model="selectedItem.complianceStatus">
<option value="符合">符合</option>
<option value="不符合">不符合</option>
</select>
<div v-if="selectedItem.complianceStatus === '不符合'">
<label for="hazardDescription">隐患描述:</label>
<input type="text" id="hazardDescription" v-model="selectedItem.hazardDescription" />
</div>
<button type="submit" style="width: 200px; height: 50px; font-size: 20px;">保存</button>
<button @click="closeModal" style="width: 200px; height: 50px; font-size: 20px;">关闭</button>
</form>
</view>
</view>
```
这样,当 `currentTab` 是 `tab1` 时,`检查标准` 标签和输入框将不会显示。
阅读全文