Tree 树形控件

用清晰的层级结构展示信息，可展开或折叠。

基础用法

基础的树形结构展示

• 一级 1
• 一级 2
• 一级 3

<template>
  <c-tree :options="treeData" />
</template>

<script setup lang="ts">
import { ref } from "vue";
const treeData = ref([
  {
    label: "一级 1",
    children: [
      {
        label: "二级 1-1",
        children: [
          {
            label: "三级 1-1-1"
          }
        ]
      }
    ]
  },
  {
    label: "一级 2",
    children: [
      {
        label: "二级 2-1",
        children: [
          {
            label: "三级 2-1-1"
          }
        ]
      },
      {
        label: "二级 2-2",
        children: [
          {
            label: "三级 2-2-1"
          }
        ]
      }
    ]
  },
  {
    label: "一级 3",
    children: [
      {
        label: "二级 3-1",
        children: [
          {
            label: "三级 3-1-1"
          }
        ]
      },
      {
        label: "二级 3-2"
      }
    ]
  }
]);
</script>

<style scoped></style>

可选择

适用于需要选择层级时使用。

• 一级 1
• 一级 2
• 一级 3

<template>
  <c-tree :options="treeData" :showCheckbox="showCheckbox" />
</template>

<script setup lang="ts">
import { ref } from "vue";
let showCheckbox = ref(true);
const treeData = ref([
  {
    label: "一级 1",
    children: [
      {
        label: "二级 1-1",
        children: [
          {
            label: "三级 1-1-1"
          }
        ]
      }
    ]
  },
  {
    label: "一级 2",
    children: [
      {
        label: "二级 2-1",
        children: [
          {
            label: "三级 2-1-1"
          }
        ]
      },
      {
        label: "二级 2-2",
        children: [
          {
            label: "三级 2-2-1"
          }
        ]
      }
    ]
  },
  {
    label: "一级 3",
    children: [
      {
        label: "二级 3-1",
        children: [
          {
            label: "三级 3-1-1"
          }
        ]
      },
      {
        label: "二级 3-2"
      }
    ]
  }
]);
</script>

<style scoped></style>

禁用复选框

节点的复选框可以设置为禁用。

• 节点 A (禁用)
• 节点 B

<template>
  <div>
    <CTree :options="treeData" :showCheckbox="true" />
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const treeData = ref([
  {
    label: "节点 A (禁用)",
    disabled: true,
    children: [{ label: "子节点 A1" }, { label: "子节点 A2" }]
  },
  {
    label: "节点 B",
    children: [{ label: "子节点 B1", disabled: true }, { label: "子节点 B2" }]
  }
]);
</script>

默认展开以及默认选中 ​

树节点可以在初始化阶段被设置为展开和选中。

• 节点 A
  • 子节点 A1
  • 子节点 A2
• 节点 B
  • 子节点 B1
  • 子节点 B2

<template>
  <div>
    <CTree
      :options="treeData"
      :showCheckbox="true"
      defaultExpandAll
      defaultChecked
    />
  </div>
</template>

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

const treeData = ref([
  {
    label: "节点 A",
    children: [{ label: "子节点 A1" }, { label: "子节点 A2" }]
  },
  {
    label: "节点 B",
    children: [{ label: "子节点 B1" }, { label: "子节点 B2" }]
  }
]);
</script>

树节点过滤 ​

树节点是可以被过滤的，通过输入框输入关键字，可以过滤出符合条件的节点。

• 苹果
• 香蕉
• 梨子

<template>
  <div>
    <input v-model="filterText" placeholder="输入关键字过滤节点" />
    <CTree :options="treeData" :showCheckbox="true" :filterText="filterText" />
  </div>
</template>

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

const filterText = ref("");

const treeData = ref([
  {
    label: "苹果",
    children: [{ label: "红富士" }, { label: "青苹果" }]
  },
  {
    label: "香蕉",
    children: [{ label: "大香蕉" }, { label: "小香蕉" }]
  },
  {
    label: "梨子",
    children: [{ label: "雪梨" }, { label: "黄金梨" }]
  }
]);
</script>

可拖拽节点 ​

通过 draggable 属性可让节点变为可拖拽

• 节点 A
• 节点 B

<template>
  <div>
    <CTree :options="treeData" :showCheckbox="true" :draggable="true" />
  </div>
</template>

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

const treeData = ref([
  {
    label: "节点 A",
    children: [{ label: "子节点 A1" }, { label: "子节点 A2" }]
  },
  {
    label: "节点 B",
    children: [{ label: "子节点 B1" }, { label: "子节点 B2" }]
  }
]);
</script>