vue3中如何实现表格某一数据被停用后不可选

在 Vue3 中，你可以通过双向绑定和计算属性来实现表格中数据的停用状态以及不可选。假设你有一个包含 `enabled` 属性的数据列表，并且这个属性决定了表格行的可见性和交互性：

1. 首先，定义一个数据数组，其中每个对象都有 `enabled` 属性：

data() {
  return {
    items: [
      { id: 1, name: 'Item 1', enabled: true },
      { id: 2, name: 'Item 2', enabled: false },
      // 更多数据...
    ]
  };
}

2. 使用模板语法，展示表格并禁用不可选的行：

<template>
  <table>
    <tr v-for="item in items" :key="item.id">
      <td>{{ item.name }}</td>
      <td>
        <button @click="toggleEnabled(item.id)" :disabled="!item.enabled">编辑</button>
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  methods: {
    toggleEnabled(id) {
      this.items.find(item => item.id === id).enabled = !this.items.find(item => item.id === id).enabled;
    }
  }
};
</script>

在这个例子中，`:disabled` 指令用于禁用编辑按钮，如果 `enabled` 为 `false`，则按钮不可点击。

3. 当需要更新表格数据时，比如从服务器获取更新，只需要同步 `items` 数组即可。