vue3+ts表格按钮互斥

在Vue3 + TypeScript中实现表格按钮互斥，可以使用和上面类似的方法。下面是一个示例代码：

<template>
  <div>
    <button :class="{ 'selected': selected === 'button1' }" @click="selectButton('button1')">Button 1</button>
    <button :class="{ 'selected': selected === 'button2' }" @click="selectButton('button2')">Button 2</button>
    <button :class="{ 'selected': selected === 'button3' }" @click="selectButton('button3')">Button 3</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      selected: null as string | null
    }
  },
  methods: {
    selectButton(value: string) {
      this.selected = value
    }
  }
})
</script>

<style>
.selected {
  background-color: #ccc;
}
</style>

在上面的代码中，我们首先在`data`中定义了一个类型为`string | null`的变量`selected`，用于追踪当前选中的按钮。在`selectButton`方法中，我们使用`value: string`参数来表示当前点击的按钮的值。当用户点击一个按钮时，我们将`selected`设置为该按钮的值，同时在其他按钮上将`selected`设置为`null`。在模板中，我们使用`:class`绑定来动态设置选中按钮的样式。

注意，我们在组件定义中使用`defineComponent`函数来声明组件，并指定`lang="ts"`来启用TypeScript支持。