ZIO UI

tree 树形展示

一种呈现嵌套结构的组件。

何时使用

文件夹、组织架构等，世间万物的大多数结构都是树形结构。使用树组件可以完整展现其中的层级关系，并具有展开/收起、选择等交互功能。

基本用法

Parent node 1
Leaf node 2
展示嵌套树形结构的呈现、连接线、展开/收起、点击选择等功能。
<template>
  <z-tree :data="data1"></z-tree>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const data1 = ref([
  {
    label: 'Parent node 1', level: 1,
    children: [{
      label: 'Parent node 1-1', level: 2,
      children: [{
        label: 'Leaf node 1-1-1', level: 3,
      }]
    }]
  }, 
  { label: 'Leaf node 2' }
]);
</script>

可勾选

Parent node 1
Leaf node 2
通过checkable开启勾选功能。
<template>
  <z-tree :data="data" checkable></z-tree>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const data = ref([
  {
    label: 'Parent node 1', level: 1,
    children: [
      {
        label: 'Parent node 1-1', level: 2,
        children: [
          { label: 'Leaf node 1-1-1', level: 3 }
        ]
      },
      { label: 'Leaf node 1-2', level: 2, }
    ]
  },
  { label: 'Leaf node 2' }
]);

</script>

禁用状态

Parent node 1
Leaf node 2
通过disableToggle/disabled分别禁用展开/收起、点击选择。
<template>
  <z-tree :data="data" checkable></z-tree>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const data = ref([
  {
    label: 'Parent node 1', level: 1,
    children: [
      {
        label: 'Parent node 1-1', level: 2,
        disableToggle: true,
        disabled: true,
        children: [
          { label: 'Leaf node 1-1-1', level: 3 }
        ]
      },
      { label: 'Leaf node 1-2', level: 2, 
      }
    ]
  },
  { label: 'Leaf node 2' }
])
</script>

自定义图标

一级 1
一级 2
一级 3
二级 3-1
二级 3-2
三级 3-2-1
一级 4
通过icon插槽可以自定义展开/收起的图标。
<template>
<z-tree :data="data" checkable>
    <template #icon="item">
      <svg
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4160"
        width="12"
        height="12"
        v-if="item.open"
      >
        <path d="M64 320l448 448 448-448z" fill="#8C92A4" p-id="4161"></path>
      </svg>
      <svg
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4361"
        width="12"
        height="12"
        v-else
      >
        <path d="M256 64l448 448-448 448z" fill="#8C92A4" p-id="4362"></path>
      </svg>
    </template>
</z-tree>

</template>

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

const data = ref([
  {
    label: '一级 1', level: 1,
    children: [{
      label: '二级 1-1', level: 2,
      children: [{
        label: '三级 1-1-1', level: 3,
      }]
    }]
  }, 
  {
    label: '一级 2', level: 1,
    disableToggle: true,
    disabled: true,
    children: [{
      label: '二级 2-1', level: 2,
      children: [{
        label: '三级 2-1-1', level: 3,
      }]
    }, {
      label: '二级 2-2', level: 2,
      children: [{
        label: '三级 2-2-1', level: 3,
      }]
    }]
  }, 
  {
    label: '一级 3', level: 1,
    open: true, // 新增
    children: [{
      label: '二级 3-1', level: 2,
      children: [{
        label: '三级 3-1-1', level: 3,
      }]
    }, {
      label: '二级 3-2', level: 2,
      open: true, // 新增
      children: [{
        label: '三级 3-2-1', level: 3,
      }]
    }]
  }, {
    label: '一级 4', level: 1,
  }])
</script>

Tree 参数

参数名类型默认值说明跳转 Demo
dataITreeNode[][]可选，树形结构数据基本用法
checkablefalse可选，是否启用勾选功能可勾选

Tree 插槽

插槽名说明
default自定义节点
icon自定义展开/收起按钮

TreeNode 参数

参数名类型默认值说明
dataITreeNode[]可选，节点数据
checkablefalse可选，是否启用勾选功能

类型

ITreeNode 

interface ITreeNode {
  label: string;
  id?: string;
  children?: ITreeNode[];

  checked?: boolean;

  disabled?: boolean;
  disableToggle?: boolean;
}