Tree树形控件

基础用法

基础的树形结构展示

0 - 0

1 - 1

2 - 2

<script>
import { TreeOptions } from '@very-plus/components/tree/src/tree';
import { ref } from 'vue';
const data = ref<TreeOptions[]>([
  {
    key: '0',
    label: '0',
    children: [
    {
        key: '0-0',
        label: '0-0'
      },
      {
        disabled: false, // 这个节点被禁用了
        key: '0-1',
        label: '0-1',
        children: [
          {
            key: '0-1-0',
            label: '0-1-0',
          },
          {
            key: '0-1-1',
            label: '0-1-1',
          }
        ]
      }
    ]
  },
  {
    key: '1',
    label: '1',
    children: [
      {
        key: '1-0',
        label: '1-0'
      },
      {
        disabled: false, // 这个节点被禁用了
        key: '1-1',
        label: '1-1',
        children: [
          {
            key: '1-1-0',
            label: '1-1-0',
          },
          {
            key: '1-1-1',
            label: '1-1-1',
          }
        ]
      }
    ]
  },
  {
    key: '2',
    label: '2',
    children: [
      {
        key: '2-0',
        label: '2-0'
      },
      {
        disabled: false, // 这个节点被禁用了
        key: '2-1',
        label: '2-1',
        children: [
          {
            key: '2-1-0',
            label: '2-1-0',
          },
          {
            key: '2-1-1',
            label: '2-1-1',
          }
        ]
      }
    ]
  },
])
</script>
<vt-tree 
    :data="data"
    :on-load="handleLoad"
    selectable
  >
  <template #default="{ node }">
    {{ node?.key }} - {{ node?.label }}
  </template>
</vt-tree>

可选择

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

40 - 道生一

41 - 道生一

<script>
import { TreeOptions } from '@very-plus/components/tree/src/tree';
import { ref } from 'vue';
const data = ref<TreeOptions[]>([
  {
    key: '0',
    label: '0',
    children: [
    {
        key: '0-0',
        label: '0-0'
      },
      {
        disabled: false, // 这个节点被禁用了
        key: '0-1',
        label: '0-1',
        children: [
          {
            key: '0-1-0',
            label: '0-1-0',
          },
          {
            key: '0-1-1',
            label: '0-1-1',
          }
        ]
      }
    ]
  },
  {
    key: '1',
    label: '1',
    children: [
      {
        key: '1-0',
        label: '1-0'
      },
      {
        disabled: false, // 这个节点被禁用了
        key: '1-1',
        label: '1-1',
        children: [
          {
            key: '1-1-0',
            label: '1-1-0',
          },
          {
            key: '1-1-1',
            label: '1-1-1',
          }
        ]
      }
    ]
  },
  {
    key: '2',
    label: '2',
    children: [
      {
        key: '2-0',
        label: '2-0'
      },
      {
        disabled: false, // 这个节点被禁用了
        key: '2-1',
        label: '2-1',
        children: [
          {
            key: '2-1-0',
            label: '2-1-0',
          },
          {
            key: '2-1-1',
            label: '2-1-1',
          }
        ]
      }
    ]
  },
])
</script>
<vt-tree 
    :data="data"
    :on-load="handleLoad"
    v-model:selected-keys="value"
    selectable
    :show-checkbox="true"
  >
  <template #default="{ node }">
    {{ node?.key }} - {{ node?.label }}
  </template>
</vt-tree>

禁用选择框

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

在示例中，通过 disabled 设置禁用状态。 相应的复选框已禁用，不能点击。

0 - 0

1 - 1

2 - 2

<script>
import { TreeOptions } from '@very-plus/components/tree/src/tree';
import { ref } from 'vue';
const data = ref<TreeOptions[]>([
  {
    key: '0',
    label: '0',
    children: [
    {
        key: '0-0',
        label: '0-0'
      },
      {
        disabled: true, // 这个节点被禁用了
        key: '0-1',
        label: '0-1',
        children: [
          {
            key: '0-1-0',
            label: '0-1-0',
          },
          {
            key: '0-1-1',
            label: '0-1-1',
          }
        ]
      }
    ]
  },
  {
    key: '1',
    label: '1',
    children: [
      {
        key: '1-0',
        label: '1-0'
      },
      {
        disabled: false, // 这个节点被禁用了
        key: '1-1',
        label: '1-1',
        children: [
          {
            key: '1-1-0',
            label: '1-1-0',
          },
          {
            key: '1-1-1',
            label: '1-1-1',
          }
        ]
      }
    ]
  },
  {
    key: '2',
    label: '2',
    children: [
      {
        key: '2-0',
        label: '2-0'
      },
      {
        disabled: false, // 这个节点被禁用了
        key: '2-1',
        label: '2-1',
        children: [
          {
            key: '2-1-0',
            label: '2-1-0',
          },
          {
            key: '2-1-1',
            label: '2-1-1',
          }
        ]
      }
    ]
  },
])
</script>
<vt-tree 
    :data="data"
    :on-load="handleLoad"
    v-model:selected-keys="value"
    selectable
    :show-checkbox="true"
  >
  <template #default="{ node }">
    {{ node?.key }} - {{ node?.label }}
  </template>
</vt-tree>

动态加载

1 - Out of Tao, One is born

2 - Out of Tao, One is born

属性

名称	类型	默认值	说明
data	object	-	展示数据
default-expanded-keys	object	-	默认展开的节点的 key 的数组
selectable	boolean	-	是否可以选择
multiple	boolean	false	是否可以多选
defaultCheckedKeys	object	-	默认选择的数据
showCheckbox	boolean	false	当前节点是否可以被选择
labelField	string	label	用户传递的label
keyField	string	label	用户传递的key
childrenField	string	children	用户传递的children
onLoad	function	-	加载子树数据的方法