<table> <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-0" @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> 表格中有状态切换按钮,需求是当switch为true时禁用按钮,同时获取riskSourceNumber参数,点击确认按钮时获取禁用状态的riskSourceNumber请求后端, 请根据以上代码中的disableSwitch和onSave方法,使用vue写出示例代码,
时间: 2024-02-10 07:08:43 浏览: 18
好的,以下是示例代码:
```html
<template>
<div>
<table>
<tbody>
<tr v-for="(n, index) in relatedRiskData" :key="index">
<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, n.isAssociation)"
class="form-check-input form-check-input-lg pointer mt-0"
>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<button
@click="onSave"
type="button"
class="btn btn-sm btn-primary"
:disabled="disableButton"
>
确认
</button>
</div>
</template>
<script>
export default {
data() {
return {
relatedRiskData: [
{ riskSourceNumber: '001', status: '待处理', isAssociation: '0' },
{ riskSourceNumber: '002', status: '已处理', isAssociation: '1' },
{ riskSourceNumber: '003', status: '待处理', isAssociation: '0' },
],
};
},
computed: {
disableButton() {
return this.relatedRiskData.some((item) => item.isAssociation === '1');
},
},
methods: {
disableSwitch(riskSourceNumber, isAssociation) {
console.log('riskSourceNumber:', riskSourceNumber);
console.log('isAssociation:', isAssociation);
},
onSave() {
const disabledRiskSourceNumbers = this.relatedRiskData
.filter((item) => item.isAssociation === '1')
.map((item) => item.riskSourceNumber);
console.log('disabledRiskSourceNumbers:', disabledRiskSourceNumbers);
},
},
};
</script>
```
在上述代码中,我先定义了一个表格和一个确认按钮,表格中包含了状态切换按钮,同时获取了riskSourceNumber参数。当switch为true时,确认按钮会被禁用。当点击确认按钮时,可以获取禁用状态的riskSourceNumber请求后端。其中,disableSwitch方法在switch状态改变时会被调用,用于获取riskSourceNumber和switch状态。onSave方法则是在点击确认按钮时被调用,用于获取禁用状态的riskSourceNumber。同时,我还使用了computed来计算是否需要禁用确认按钮。