C_Tree 全局树形组件

纯树形展示组件，提供标签页、搜索、过滤等功能。布局由页面自行控制。

设计原则

• ✅ 单一职责：只负责树形展示，不管布局
• ✅ 解耦设计：与页面布局完全独立
• ✅ 高复用性：可在任何布局中使用
• ✅ 自动导入：无需手动 import

Props

参数	说明	类型	默认值	必填
tabs	标签页配置	Array<{label, name}>	-	否
treeData	树形数据	Array	-	是
treeProps	树形配置	Object	{children: 'children', label: 'label'}	否
defaultActiveTab	默认激活标签	string	'tab1'	否
showSearch	显示搜索	boolean	true	否
searchPlaceholder	搜索占位符	string	'关键词搜索'	否
defaultExpandAll	默认展开	boolean	true	否
highlightCurrent	高亮当前	boolean	true	否

Events

事件名	说明	参数
node-click	节点被点击	(data: any)
tab-change	标签页切换	(tabName: string)

Slots

插槽名	说明	参数
node	自定义节点内容	{ data }

暴露方法

方法名	说明	参数
clearSearch	清空搜索	-
switchTab	切换标签页	(tabName: string)

使用示例

1. 基础用法

<template>
  <C_Tree :tree-data="treeData" @node-click="handleNodeClick" />
</template>

<script setup>
const treeData = ref([
  {
    id: "1",
    label: "节点1",
    children: [{ id: "1-1", label: "子节点1-1" }]
  }
]);

const handleNodeClick = (data) => {
  console.log("点击节点:", data);
};
</script>

2. 带标签页和搜索

<template>
  <C_Tree
    :tabs="tabs"
    :tree-data="treeData"
    :default-active-tab="activeTab"
    @node-click="handleNodeClick"
    @tab-change="handleTabChange"
  />
</template>

<script setup>
const tabs = [
  { label: "基本信息", name: "tab1" },
  { label: "交付标准", name: "tab2" }
];

const activeTab = ref("tab1");
const treeData = ref([...]);

const handleTabChange = (tabName) => {
  activeTab.value = tabName;
  // 加载对应标签页的数据...
};
</script>

3. 左右布局（使用 jh-drag-col）

<template>
  <jh-drag-col :left-width="300">
    <!-- 左侧：树形 -->
    <template #left>
      <C_Tree
        :tabs="tabs"
        :tree-data="treeData"
        @node-click="handleNodeClick"
      />
    </template>

    <!-- 右侧：详情 -->
    <template #right>
      <div class="detail-panel">
        <h3>{{ selectedNode?.label }}</h3>
        <p>详情内容...</p>
      </div>
    </template>
  </jh-drag-col>
</template>

<script setup>
const tabs = [
  { label: "基本信息", name: "tab1" },
  { label: "交付标准", name: "tab2" }
];

const treeData = ref([...]);
const selectedNode = ref(null);

const handleNodeClick = (data) => {
  selectedNode.value = data;
};
</script>

<style scoped>
.detail-panel {
  padding: 16px;
  background: #fff;
  border-radius: 4px;
  height: 100%;
}
</style>

注意事项

1. treeData 必填：组件必须传入树形数据
2. 布局由页面控制：组件本身只占满父容器的 100% 高度
3. 自动导入：已配置 Vite 自动导入，无需手动 import
4. 事件名格式：使用 kebab-case（@node-click、@tab-change）