antD Tree 节点显示、隐藏切换

有一种需要求根据数据条件动态显示或隐藏树形控件的节点，有如下数据，要求根据用户的选择切换树形数据的显示。

let data = {
  title: '平台',
  key: 'p_platform',
  status: 0,
  children: [
    {
      title: '公共资源',
      key: 'p_publicResource',
      status: 0,
      children: [
        { key: 'p_userMgmt', title: '用户管理', status: 1 }
      ]
    },
    {
      title: '平台管理',
      key: 'p_platformMgmt',
      status: 0,
      children: [
        { key: 'p_authorityMgmt', title: '权限管理',status: 0 },
        { key: 'p_capacityMgmt', title: '容量管理', status: 0},
        { key: 'p_systemAnalysis', title: '系统分析', status: 0 }
      ]
    }
  ]
}

界面如下：

其中有个用户管理节点，状态为1，需要在切换状态时显示或隐藏。后台过滤数据当然最轻松，本着求人不如求己的原则，要在前端解决这个需求。从antD 文档中没有直接提供隐藏节点的功能，如此合理的需求怎么会不支持呢？当看到TreeNode有个class参数时好像柳暗花明了。

于是……，直接上代码：

<template>
  <a-card style="width:500px">
    <template #extra>
      隐藏状态为1节点：
      <a-switch v-model:checked="hideDisableNode" @change="changeDisplayTreeStatus"/>
    </template>
    <div>
      <a-tree
        checkable
        defaultExpandAll
        :tree-data="treeData"
      >
      </a-tree>
    </div>
  </a-card>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
let data = {
  title: '平台',
  key: 'p_platform',
  status: 0,
  children: [
    {
      title: '公共资源',
      key: 'p_publicResource',
      status: 0,
      children: [
        { key: 'p_userMgmt', title: '用户管理', status: 1 }
      ]
    },
    {
      title: '平台管理',
      key: 'p_platformMgmt',
      status: 0,
      children: [
        { key: 'p_authorityMgmt', title: '权限管理',status: 0 },
        { key: 'p_capacityMgmt', title: '容量管理', status: 0},
        { key: 'p_systemAnalysis', title: '系统分析', status: 0 }
      ]
    }
  ]
}
let treeData = ref([])
onMounted(async () => {
  reloadTree()
});
const changeDisplayTreeStatus = () => {
  reloadTree()
}
const hideDisableNode = ref(true)
const reloadTree = () => {
  treeData.value = []
  treeData.value.push(mgmtTree(data))
}
const mgmtTree = () => {
  if (tmp.status === 1 && hideDisableNode.value) {
    tmp.class = 'disable'
  } else {
    tmp.class = 'enable'
  }
  if (Array.isArray(tmp.children)) {
    tmp.children.forEach((child: any) => {
      mgmtTree(child)
    })
  }
  return tmp
}
</script>
<style lang="scss">
.disable {
  display: none !important;
}
</style>

在用户切换状态时，重新遍历数据，设置class的值就可以完成节点的显示与隐藏了！