第十周总结
完成了树状查询的前后端组件,下一步要将那个组件和那个表格相结合。
<transition name="slide">
<div v-show="isSidebarOpen" class="sidebar">
<div class="header-bar">
<div class="title-group">
<div class="tree-header">安全风险统计</div>
<div class="update-time">最后更新:{{ lastUpdateTime }}</div>
</div>
<el-button
type="primary"
size="small"
:loading="loading"
@click="handleManualRefresh"
plain
>
<el-icon><Refresh /></el-icon>
刷新数据
</el-button>
</div>
<div v-loading="loading">
<el-tree
:data="treeData"
node-key="name"
:props="treeProps"
:expand-on-click-node="false"
>
<template #default="{ node, data }">
<div class="tree-node">
<span class="node-name">
{{ getLevelLabel(node.level) }}:{{ data.name }}
</span>
<div class="node-stats">
<span
class="total clickable"
@click="handleLevelClick(node, 'total')"
>
总数: {{ data.total }}
</span>
<el-tag
v-for="(count, level) in data.levels"
:key="level"
size="small"
:type="getTagType(level)"
class="clickable-tag"
@click="handleLevelClick(node, level)"
>
{{ level }}: {{ count }}
</el-tag>
</div>
</div>
</template>
</el-tree>
</div>
</div>
</transition>

浙公网安备 33010602011771号