vue表格中关闭按钮使一行变灰怎么写

可以通过在表格行的 `tr` 标签上绑定一个状态变量，然后使用 `v-bind:class` 动态绑定 `class` 属性来实现。

具体代码如下所示：

<template>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in data" :key="index" :class="{ 'is-disabled': item.disabled }">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>
          <button @click="handleDisable(index)" :disabled="item.disabled">Disable</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { name: 'John', age: 20, disabled: false },
        { name: 'Sarah', age: 25, disabled: false },
        { name: 'Tom', age: 30, disabled: false },
      ],
    };
  },
  methods: {
    handleDisable(index) {
      this.data[index].disabled = !this.data[index].disabled;
    },
  },
};
</script>

<style>
.is-disabled {
  background-color: #eee;
  color: #999;
}
</style>

在上述代码中，我们在 `data` 数组中添加了一个 `disabled` 属性来表示每一行是否被禁用。在点击行内的 `Disable` 按钮时，我们会修改对应行的 `disabled` 属性的值。在 `tr` 标签上使用了 `v-bind:class` 指令，当对应行的 `disabled` 属性为 `true` 时，该行将会添加一个名为 `is-disabled` 的类，这个类的样式会使该行变灰。最后，我们在样式中定义了 `is-disabled` 类的样式。