<tbody> <tr v-for="n,index in relatedRiskData"> <td>{{n.riskSourceNumber}}</td> <td>{{n.status}}</td> <td> <div data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="top" :data-bs-content="n.isAssociation=='1'?'请在详情页操作':null"> <div class="form-check form-switch"> <input type="checkbox" :aria-checked="n.isAssociation=='1'" :disabled="n.isAssociation=='1'" :id="'status'+index" v-model="n.isAssociation" @change="disableSwitch(n.riskSourceNumber)" 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> 现有一个表格,表格中有开关操作,当开关是开启状态时,点击确认按钮把选了开启状态的参数riskSourceNumber集合传过去请求后端,请根据以上代码调整优化
时间: 2024-02-10 18:09:11 浏览: 195
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
可以按照以下步骤进行优化:
1. 使用一个新的数组来存储选中的风险源编号,当开关是开启状态时,把该风险源编号添加到新数组中。
2. 在确认按钮的点击事件中,把新数组作为参数传递给后端。
下面是修改后的代码:
```
<tbody>
<tr v-for="(n, index) in relatedRiskData">
<td>{{ n.riskSourceNumber }}</td>
<<td>{{ n.status }}</td>
<td>
<div v-if="n.isAssociation === '1'" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="top" :data-bs-content="'请在详情页操作'">
<div class="form-check form-switch">
<input type="checkbox" :aria-checked="true" :disabled="true" :id="'status'+index" v-model="n.isAssociation" class="form-check-input form-check-input-lg pointer mt-0">
</div>
</div>
<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>
<script>
export default {
data() {
return {
relatedRiskData: [], // 相关风险数据
selectedRiskNumbers: [], // 选中的风险源编号
}
},
methods: {
// 禁用开关
disableSwitch(riskSourceNumber) {
const index = this.relatedRiskData.findIndex(item => item.riskSourceNumber === riskSourceNumber)
this.relatedRiskData[index].isAssociation = '1'
},
// 点击确认按钮
onSave() {
this.selectedRiskNumbers = this.relatedRiskData.filter(item => item.checked).map(item => item.riskSourceNumber)
// 调用后端接口,传递选中的风险源编号
},
},
}
</script>
```
注意,需要添加一个新的属性 `checked` 来表示当前行是否选中,同时修改禁用开关的逻辑。另外,在表格中需要根据 `n.isAssociation` 的值来显示相应的控件。
阅读全文