有一种需要求根据数据条件动态显示或隐藏树形控件的节点，有如下数据，要求根据用户的选择切换树形数据的显示。
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的值就可以完成节点的显示与隐藏了！
