Vue3 组件Tree 根据返回的status是0或者1判断菜单是否被禁用

在Vue3中，如果你想要根据返回的`status`值来判断菜单是否被禁用，并且根据这个状态来显示不同的UI，你可以通过在组件中定义一个计算属性或者方法来实现这个逻辑。这里以一个树形组件为例来说明如何进行操作。

首先，在你的组件中定义一个名为`disabled`的计算属性，它将根据`status`的值返回一个布尔值，表示菜单是否被禁用。例如：

export default {
  // ... 其他选项
  setup(props) {
    const status = props.status; // 假设status是组件的一个prop

    // 计算属性返回是否禁用
    const disabled = computed(() => status.value === '0');

    // 返回需要在模板中使用的数据
    return {
      disabled
    };
  }
}

然后，在组件的模板中，你可以根据`disabled`的值来决定如何显示菜单项。例如，如果菜单项被禁用，你可能会显示一个不同的图标或者文本，或者直接不显示这个菜单项。

<template>
  <div v-if="!disabled">
    <!-- 正常显示的菜单内容 -->
    <span>正常菜单项</span>
  </div>
  <div v-else>
    <!-- 禁用状态下的菜单内容 -->
    <span>禁用菜单项</span>
  </div>
</template>

这样，根据传入的`status`值，Vue组件会自动处理菜单项的显示逻辑，并且根据`status`的值来决定菜单项是否应该被禁用。