<table> <tbody> <tr v-for="n,index in relatedRiskData"> <td>{{n.riskSourceNumber}}</td> <td>{{n.status}}</td> <td> <div v-else> <div class="form-check form-switch"> <input type="checkbox" :aria-checked="false" :id="'status'+index" v-model="n.checked" class="form-check-input form-check-input-lg pointer mt-0"> </div> </div> </td> </tr> </tbody> <button @click="onSave" type="button" class="btn btn-sm btn-primary">确认</button> </table> 以上代码用vue的计算属性,确认按钮根据是否选择了开关来禁用或启用,排除禁用的状态的开关,请修改调整代码
时间: 2024-02-14 21:11:55 浏览: 71
你可以尝试这样修改代码:
```
<table>
<tbody>
<tr v-for="(n, index) in relatedRiskData">
<td>{{n.riskSourceNumber}}</td>
<td>{{n.status}}</td>
<td>
<div v-if="n.status !== '禁用'">
<div class="form-check form-switch">
<input type="checkbox" :aria-checked="false" :id="'status'+index" v-model="n.checked" class="form-check-input form-check-input-lg pointer mt-0">
</div>
</div>
</td>
</tr>
</tbody>
<button @click="onSave" type="button" class="btn btn-sm btn-primary" :disabled="!isConfirmEnabled">确认</button>
</table>
```
然后在计算属性中添加以下代码:
```
computed: {
isConfirmEnabled() {
return this.relatedRiskData.some(n => n.checked);
}
}
```
这样,确认按钮将仅在至少一个开关被选中时启用。并且禁用状态的开关将不会被渲染。
阅读全文