vue3表格按钮互斥
时间: 2023-06-28 19:16:25 浏览: 51
您可以通过在按钮之间共享一个变量来实现按钮的互斥。具体来说,您可以为每个按钮添加一个点击事件,该事件会将变量设置为该按钮的值,同时在其他按钮上将该变量设置为null或undefined。这样,只有一个按钮可以被选中,其他按钮则会被禁用。以下是一个示例代码:
```html
<template>
<div>
<button :disabled="selected === 'button1'" @click="selectButton('button1')">Button 1</button>
<button :disabled="selected === 'button2'" @click="selectButton('button2')">Button 2</button>
<button :disabled="selected === 'button3'" @click="selectButton('button3')">Button 3</button>
</div>
</template>
<script>
export default {
data() {
return {
selected: null
}
},
methods: {
selectButton(value) {
this.selected = value;
}
}
}
</script>
```
在上述代码中,我们使用了一个名为`selected`的变量来追踪当前选中的按钮。当用户点击一个按钮时,我们将其值设置为`selected`,同时在其他按钮上将该变量设置为null或undefined。这样,只有一个按钮可以被选中,其他按钮则会被禁用。