Tui

<template>
  <div class="tree-demo-wrap">
    <div class="tree-demo-actions">
      <TsButton size="small" @click="toggleCheckMode">
        子节点勾选模式：{{ childCheckMode === 'single' ? 'single（同级单选）' : 'multiple（多选）' }}
      </TsButton>
      <TsButton size="small" @click="toggleDisabledKey('backend-platform')">
        {{ hasDisabledKey('backend-platform') ? '启用父节点 backend-platform' : '禁用父节点 backend-platform' }}
      </TsButton>
      <TsButton size="small" @click="toggleDisabledKey('backend-platform-gateway-prod')">
        {{ hasDisabledKey('backend-platform-gateway-prod') ? '启用子节点 prod' : '禁用子节点 prod' }}
      </TsButton>
      <TsButton size="small" @click="toggleDisabledKey('backend-platform-gateway-staging')">
        {{ hasDisabledKey('backend-platform-gateway-staging') ? '启用子节点 staging' : '禁用子节点 staging' }}
      </TsButton>
    </div>

    <TsTree
      v-model="selectedKey"
      :data="treeData"
      :checkedKeys="checkedKeys"
      :childCheckMode="childCheckMode"
      :disabledKeys="disabledKeys"
      defaultExpandAll
      @update:checkedKeys="handleCheckedChange"
    />

    <div class="tree-demo-state">
      <div>当前单选节点：{{ selectedKey || '-' }}</div>
      <div>当前勾选节点：{{ checkedKeys.join(', ') || '-' }}</div>
      <div>禁用节点 keys：{{ disabledKeys.join(', ') || '-' }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const selectedKey = ref<string | number | null>('frontend');
const checkedKeys = ref<Array<string | number>>(['backend-platform-gateway-prod']);
const childCheckMode = ref<'multiple' | 'single'>('multiple');
const disabledKeys = ref<Array<string | number>>(['frontend-legacy']);

const treeData = [
  {
    key: 'frontend',
    label: '前端组',
    children: [
      { key: 'frontend-vue', label: 'Vue 研发' },
      { key: 'frontend-react', label: 'React 研发' },
      { key: 'frontend-legacy', label: '历史项目（禁用）', disabled: true },
    ],
  },
  {
    key: 'backend',
    label: '后端组',
    children: [
      { key: 'backend-java', label: 'Java 服务' },
      {
        key: 'backend-platform',
        label: '平台能力（三级/四级示例）',
        children: [
          {
            key: 'backend-platform-gateway',
            label: '网关集群（第三级）',
            children: [
              { key: 'backend-platform-gateway-prod', label: '生产集群（第四级）' },
              { key: 'backend-platform-gateway-staging', label: '预发集群（第四级）' },
            ],
          },
          { key: 'backend-platform-observability', label: '可观测中心（第三级）' },
        ],
      },
    ],
  },
];

const handleCheckedChange = (keys: Array<string | number>) => {
  checkedKeys.value = keys;
};

const toggleCheckMode = () => {
  childCheckMode.value = childCheckMode.value === 'multiple' ? 'single' : 'multiple';
};

const hasDisabledKey = (key: string | number) => {
  return disabledKeys.value.includes(key);
};

const toggleDisabledKey = (key: string | number) => {
  if (hasDisabledKey(key)) {
    disabledKeys.value = disabledKeys.value.filter((item) => item !== key);
  } else {
    disabledKeys.value = [...disabledKeys.value, key];
  }
};
</script>

<style scoped>
.tree-demo-wrap {
  display: grid;
  gap: 12px;
  max-width: 520px;
}

.tree-demo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tree-demo-state {
  font-size: 13px;
  color: var(--ts-color-desc);
  line-height: 1.8;
}
</style>

<template>
  <div class="tree-demo-wrap">
    <TsTree :data="treeData" dragMode="sibling" defaultExpandAll @update:data="handleDataChange" />
    <div class="tree-demo-note">dragMode="sibling" 仅支持同级节点排序，不能跨父级移动。</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const treeData = ref([
  {
    key: 'product',
    label: '产品线',
    children: [
      { key: 'product-1', label: '需求池整理' },
      { key: 'product-2', label: '版本规划' },
      { key: 'product-3', label: '需求评审' },
    ],
  },
  {
    key: 'engineering',
    label: '研发线',
    children: [
      { key: 'engineering-1', label: '技术方案评审' },
      { key: 'engineering-2', label: '代码开发' },
      { key: 'engineering-3', label: '联调测试' },
    ],
  },
]);

const handleDataChange = (nextData: any[]) => {
  treeData.value = nextData;
};
</script>

<style scoped>
.tree-demo-wrap {
  display: grid;
  gap: 10px;
  max-width: 520px;
}

.tree-demo-note {
  font-size: 13px;
  color: var(--ts-color-desc);
}
</style>

<template>
  <div class="tree-demo-wrap">
    <TsTree :data="treeData" dragMode="free" defaultExpandAll @update:data="handleDataChange" @node-drop="handleDrop" />
    <div class="tree-demo-note">dragMode="free" 支持跨层级自由拖拽，可放到节点前、后或节点内部。</div>
    <div class="tree-demo-note">最近一次拖拽：{{ lastDropText }}</div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';

const treeData = ref([
  {
    key: 'todo',
    label: '待办',
    children: [
      { key: 'todo-1', label: '需求同步' },
      { key: 'todo-2', label: '接口联调' },
    ],
  },
  {
    key: 'doing',
    label: '进行中',
    children: [
      { key: 'doing-1', label: 'UI 实现' },
      { key: 'doing-2', label: '单元测试' },
    ],
  },
  {
    key: 'done',
    label: '已完成',
    children: [{ key: 'done-1', label: '代码评审' }],
  },
]);

const lastDrop = ref<{
  dragKey: string | number;
  dropKey: string | number;
  position: 'before' | 'inside' | 'after';
} | null>(null);

const lastDropText = computed(() => {
  if (!lastDrop.value) return '暂无';
  const { dragKey, dropKey, position } = lastDrop.value;
  return `${String(dragKey)} -> ${String(dropKey)} (${position})`;
});

const handleDataChange = (nextData: any[]) => {
  treeData.value = nextData;
};

const handleDrop = (payload: { dragKey: string | number; dropKey: string | number; position: 'before' | 'inside' | 'after' }) => {
  lastDrop.value = {
    dragKey: payload.dragKey,
    dropKey: payload.dropKey,
    position: payload.position,
  };
};
</script>

<style scoped>
.tree-demo-wrap {
  display: grid;
  gap: 10px;
  max-width: 520px;
}

.tree-demo-note {
  font-size: 13px;
  color: var(--ts-color-desc);
}
</style>

<template>
  <div class="tree-demo-wrap">
    <TsButton size="small" @click="showArrow = !showArrow">
      {{ showArrow ? '关闭 arrow' : '开启 arrow' }}
    </TsButton>

    <TsTree :data="treeData" :checkedKeys="checkedKeys" :showArrow="showArrow" independentCheck defaultExpandAll @update:checkedKeys="handleCheckedChange">
      <template #arrow="{ expanded, hasChildren }">
        <TsIcon v-if="hasChildren" :name="expanded ? 'ArrowDownIcon' : 'ArrowRightIcon'" font-size="12px" />
      </template>
    </TsTree>

    <div class="tree-demo-note">使用 `showArrow` 可关闭 arrow（含 arrow 插槽渲染）。</div>
    <div class="tree-demo-note">使用 `independentCheck` 后，父子节点勾选互不影响。</div>
    <div class="tree-demo-note">当前勾选：{{ checkedKeys.join(', ') || '-' }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsIcon } from 'tui';

const checkedKeys = ref<Array<string | number>>(['service-api']);
const showArrow = ref(true);

const treeData = [
  {
    key: 'service',
    label: '服务域',
    children: [
      { key: 'service-api', label: 'API 网关' },
      { key: 'service-job', label: '任务调度' },
    ],
  },
  {
    key: 'infra',
    label: '基础设施',
    children: [
      { key: 'infra-mq', label: '消息队列' },
      { key: 'infra-cache', label: '缓存服务' },
    ],
  },
];

const handleCheckedChange = (keys: Array<string | number>) => {
  checkedKeys.value = keys;
};
</script>

<style scoped>
.tree-demo-wrap {
  display: grid;
  gap: 10px;
  max-width: 520px;
}

.tree-demo-note {
  font-size: 13px;
  color: var(--ts-color-desc);
}
</style>

<template>
  <div class="tree-demo-wrap">
    <TsTree :data="treeData" :showCheckbox="false" defaultExpandAll>
      <template #label-prefix="{ hasChildren, expanded }">
        <TsIcon style="margin-right: 6px;" v-if="hasChildren" :name="expanded ? 'FolderOpenIcon' : 'FolderCloseIcon'" font-size="14px" class="folder-icon" />
      </template>

      <template #label-suffix="{ node, hasChildren }">
        <span style="margin-left: 6px;" v-if="hasChildren && getChildCount(node) > 0" class="tree-count">{{ getChildCount(node) }}</span>
      </template>
    </TsTree>

    <div class="tree-demo-note">该示例使用 FolderCloseIcon / FolderOpenIcon 构建文件夹目录，并隐藏了复选框。</div>
  </div>
</template>

<script setup lang="ts">
import { TsIcon } from 'tui';

const treeData = [
  {
    key: 'root-docs',
    label: 'docs',
    children: [
      {
        key: 'root-docs-guides',
        label: 'guides',
        children: [
          { key: 'root-docs-guides-getting-started', label: 'getting-started.md' },
          { key: 'root-docs-guides-tree-component', label: 'tree-component.md' },
        ],
      },
      {
        key: 'root-docs-examples',
        label: 'examples',
        children: [
          { key: 'root-docs-examples-tree-basic', label: 'tree-basic.vue' },
          { key: 'root-docs-examples-tree-folder', label: 'tree-folder.vue' },
        ],
      },
    ],
  },
  {
    key: 'root-src',
    label: 'src',
    children: [
      {
        key: 'root-src-components',
        label: 'components',
        children: [
          { key: 'root-src-components-tree', label: 'Tree.vue' },
          { key: 'root-src-components-tree-node', label: 'TreeNode.vue' },
        ],
      },
    ],
  },
];

const getChildCount = (node: any): number => {
  return Array.isArray(node?.children) ? node.children.length : 0;
};
</script>

<style scoped>
.tree-demo-wrap {
  display: grid;
  gap: 10px;
  max-width: 560px;
}

.folder-icon {
  color: var(--ts-color-blue);
}

.tree-count {
  font-size: 12px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 10px;
  background-color: rgba(13, 142, 247, 0.12);
  color: var(--ts-color-blue);
}

.tree-demo-note {
  font-size: 13px;
  color: var(--ts-color-desc);
}
</style>