v-treeview如何不预过滤数据仅展示disabled为false的有效节点

方案实现（兼容Vuetify 2/3） #

你之前用label插槽只隐藏了节点文本部分，整个节点DOM容器还保留所以会出现空白，通过item-class属性结合CSS隐藏整行节点即可满足需求，全程不需要修改原始树形数据：

1. 给v-treeview组件绑定item-class属性，动态返回隐藏类名

<v-treeview
  :items="yourOriginalTreeData"
  :item-class="getNodeClass"
  <!-- 保留你原本的其他配置，比如v-model、勾选相关属性等 -->
  <!-- 如果有用到勾选功能，加上下面这行即可自动排除disabled节点 -->
  :item-disabled="item => item.disabled"
></v-treeview>

2. 编写类名判断方法

methods: {
  getNodeClass(item) {
    // 禁用节点直接返回隐藏类
    return item.disabled ? 'hidden-tree-item' : ''
  }
}

3. 添加隐藏样式
   如果你的style标签加了scoped属性，需要用深度选择器让样式生效：

<style scoped>
/* Vuetify2 写法 */
::v-deep .hidden-tree-item {
  display: none !important;
}

/* Vuetify3 写法换成:deep()即可
:deep(.hidden-tree-item) {
  display: none !important;
}
*/
</style>

额外优化（可选） #

如果父节点本身未禁用，但所有子节点全部为禁用状态，不想显示父节点的展开箭头，可以通过prepend插槽自定义展开图标：

<template v-slot:prepend="{ item, open }">
  <v-icon
    v-if="!item.disabled && item.children?.some(child => !child.disabled)"
    @click="open = !open"
  >
    {{ open ? 'mdi-chevron-down' : 'mdi-chevron-right' }}
  </v-icon>
</template>

方案优势 #

• 原始数据完全保留，你可以随时访问所有节点（包括disabled为true的节点）修改属性，修改disabled值后节点显示状态会自动同步
• 没有空白占位问题，所有禁用节点会被完全隐藏
• 不需要额外的计算属性过滤数据，逻辑复杂度极低

内容的提问来源于stack exchange，提问作者Michel Gisenaël