vue3中表格中通过判断某个字段来设置对应按钮和消息提示的disabled展示

在Vue 3中，你可以使用计算属性或方法来根据表格中特定字段的条件来设置按钮的disabled属性和消息提示。以下是一个简单的示例：

<template>
  <div>
    <table>
      <tr v-for="item in items" :key="item.id">
        <td>{{ item.name }}</td>
        <td>
          <button :disabled="isButtonDisabled(item)" @click="handleAction(item)">
            执行操作
          </button>
        </td>
      </tr>
    </table>
  </div>
</template>
 
<script>
import { defineComponent, reactive } from 'vue';
 
export default defineComponent({
  setup() {
    const items = reactive([
      { id: 1, name: 'Item 1', status: 'active' },
      { id: 2, name: 'Item 2', status: 'inactive' },
      // ...更多项
    ]);
 
    // 检查条件并返回布尔值，决定是否禁用按钮
    function isButtonDisabled(item) {
      // 例如，禁用状态为'active'的项的按钮
      return item.status === 'active';
    }
 
    // 处理按钮点击事件
    function handleAction(item) {
      if (isButtonDisabled(item)) {
        alert('该项当前状态不允许执行操作。');
        return;
      }
      // 执行操作逻辑
    }
 
    return { items, isButtonDisabled, handleAction };
  },
});
</script>

在这个例子中，我们有一个表格items，它是一个响应式对象数组。对于每个item，我们通过v-for渲染表格行。在每行中，我们有一个按钮，其disabled属性由isButtonDisabled方法根据当前项的状态来决定。如果项的状态是'active'，按钮将被禁用。当按钮被点击时，handleAction方法被调用，它会检查按钮是否被禁用，并且如果是，则显示一个警告消息。