Tree

Display a set of data with hierarchies.

Basic usage

Give each node a globally unique key (required), and the title is the content to be displayed on the node.

Trunk 1

Branch 1-1

Leaf 1-1-1

Leaf 1-1-2

Branch 1-2

Leaf 1-2-1

Block node

The treeNode occupy the remaining horizontal space.

Trunk 1

Branch 1-1

Leaf 1-1-1

Leaf 1-1-2

Branch 1-2

Leaf 1-2-1

Multiple Select

By setting multiple, the tree can support multiple selection.

Trunk 1

Branch 1-1

Leaf 1-1-1

Leaf 1-1-2

Branch 1-2

Leaf 1-2-1

Checkable

Setting the checkable attribute to display the checkbox, and you can use defaultCheckedKeys to specify which nodes are checked by default.

<template>
  <tu-row :gutter="20">
    <tu-col :span="12">
      <p>Checkable</p>
      <tu-tree checkable :data="treeData" />
    </tu-col>
    <tu-col :span="12">
      <p>Check strictly</p>
      <tu-tree checkable check-strictly :data="treeData" />
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
const treeData = [
  {
    title: 'Trunk 1',
    key: '1',
    children: [
      {
        title: 'Leaf 1-1',
        key: '1-1'
      },
      {
        title: 'Branch 1-2',
        key: '1-2',
        disabled: true,
        children: [
          {
            title: 'Leaf 1-2-1',
            key: '1-2-1'
          },
          {
            title: 'Leaf 1-2-2',
            key: '1-2-2',
            disableCheckbox: true
          }
        ]
      }
    ]
  },
  {
    title: 'Trunk 2',
    key: '2',
    children: [
      {
        title: 'Branch 2-1',
        key: '2-1',
        children: [
          {
            title: 'Leaf 2-1-1',
            key: '2-1-1'
          },
          {
            title: 'Leaf 2-1-2',
            key: '2-1-2'
          }
        ]
      },
      {
        title: 'Leaf 2-2',
        key: '2-2'
      }
    ]
  }
];
</script>

<template>
  <tu-row :gutter="20">
    <tu-col :span="12">
      <p>Checkable</p>
      <tu-tree checkable :data="treeData" />
    </tu-col>
    <tu-col :span="12">
      <p>Check strictly</p>
      <tu-tree checkable check-strictly :data="treeData" />
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
const treeData = [
  {
    title: 'Trunk 1',
    key: '1',
    children: [
      {
        title: 'Leaf 1-1',
        key: '1-1'
      },
      {
        title: 'Branch 1-2',
        key: '1-2',
        disabled: true,
        children: [
          {
            title: 'Leaf 1-2-1',
            key: '1-2-1'
          },
          {
            title: 'Leaf 1-2-2',
            key: '1-2-2',
            disableCheckbox: true
          }
        ]
      }
    ]
  },
  {
    title: 'Trunk 2',
    key: '2',
    children: [
      {
        title: 'Branch 2-1',
        key: '2-1',
        children: [
          {
            title: 'Leaf 2-1-1',
            key: '2-1-1'
          },
          {
            title: 'Leaf 2-1-2',
            key: '2-1-2'
          }
        ]
      },
      {
        title: 'Leaf 2-2',
        key: '2-2'
      }
    ]
  }
];
</script>

V-model

The selectedKeys, checkedKeys, and expandedKeys attributes can all be controlled, not only supporting v-model, but also controlling how to update attribute values in the corresponding select / check / expand events.

<template>
  <tu-button-group class="mb-2">
    <tu-button type="primary" @click="toggleChecked">
      {{ checkedKeys?.length ? 'Deselect all' : 'Select all' }}
    </tu-button>
    <tu-button type="primary" @click="toggleExpanded">
      {{ expandedKeys?.length ? 'Fold all' : 'Unfold all' }}
    </tu-button>
  </tu-button-group>

  <tu-tree
    :data="treeData"
    :checkable="true"
    v-model:selected-keys="selectedKeys"
    v-model:checked-keys="checkedKeys"
    v-model:expanded-keys="expandedKeys"
    @select="onSelect"
    @check="onCheck"
    @expand="onExpand"
  />
</template>

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

const treeData = [
  {
    title: 'Trunk 1',
    key: '1',
    children: [
      {
        title: 'Leaf 1-1',
        key: '1-1'
      },
      {
        title: 'Branch 1-2',
        key: '1-2',
        children: [
          {
            title: 'Leaf 1-2-1',
            key: '1-2-1'
          }
        ]
      }
    ]
  },
  {
    title: 'Trunk 2',
    key: '2',
    children: [
      {
        title: 'Leaf 2-1',
        key: '2-1'
      },
      {
        title: 'Leaf 2-2',
        key: '2-2'
      }
    ]
  }
];

const allCheckedKeys = ['1', '1-1', '1-2', '1-2-1', '2', '2-1', '2-2'];
const allExpandedKeys = ['1', '1-2', '2'];

const selectedKeys = ref<string[]>([]);
const checkedKeys = ref<string[]>([]);
const expandedKeys = ref<string[]>(allExpandedKeys);

const toggleChecked = () => {
  checkedKeys.value = checkedKeys?.value.length ? [] : allCheckedKeys;
};

const toggleExpanded = () => {
  expandedKeys.value = expandedKeys?.value.length ? [] : allExpandedKeys;
};

const onSelect = (newSelectedKeys: string[], event: any) => {
  console.log('select: ', newSelectedKeys, event);
};

const onCheck = (newCheckedKeys: string[], event: any) => {
  console.log('check: ', newCheckedKeys, event);
};

const onExpand = (newExpandedKeys: string[], event: any) => {
  console.log('expand: ', newExpandedKeys, event);
};
</script>

<template>
  <tu-button-group class="mb-2">
    <tu-button type="primary" @click="toggleChecked">
      {{ checkedKeys?.length ? 'Deselect all' : 'Select all' }}
    </tu-button>
    <tu-button type="primary" @click="toggleExpanded">
      {{ expandedKeys?.length ? 'Fold all' : 'Unfold all' }}
    </tu-button>
  </tu-button-group>

  <tu-tree
    :data="treeData"
    :checkable="true"
    v-model:selected-keys="selectedKeys"
    v-model:checked-keys="checkedKeys"
    v-model:expanded-keys="expandedKeys"
    @select="onSelect"
    @check="onCheck"
    @expand="onExpand"
  />
</template>

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

const treeData = [
  {
    title: 'Trunk 1',
    key: '1',
    children: [
      {
        title: 'Leaf 1-1',
        key: '1-1'
      },
      {
        title: 'Branch 1-2',
        key: '1-2',
        children: [
          {
            title: 'Leaf 1-2-1',
            key: '1-2-1'
          }
        ]
      }
    ]
  },
  {
    title: 'Trunk 2',
    key: '2',
    children: [
      {
        title: 'Leaf 2-1',
        key: '2-1'
      },
      {
        title: 'Leaf 2-2',
        key: '2-2'
      }
    ]
  }
];

const allCheckedKeys = ['1', '1-1', '1-2', '1-2-1', '2', '2-1', '2-2'];
const allExpandedKeys = ['1', '1-2', '2'];

const selectedKeys = ref<string[]>([]);
const checkedKeys = ref<string[]>([]);
const expandedKeys = ref<string[]>(allExpandedKeys);

const toggleChecked = () => {
  checkedKeys.value = checkedKeys?.value.length ? [] : allCheckedKeys;
};

const toggleExpanded = () => {
  expandedKeys.value = expandedKeys?.value.length ? [] : allExpandedKeys;
};

const onSelect = (newSelectedKeys: string[], event: any) => {
  console.log('select: ', newSelectedKeys, event);
};

const onCheck = (newCheckedKeys: string[], event: any) => {
  console.log('check: ', newCheckedKeys, event);
};

const onExpand = (newExpandedKeys: string[], event: any) => {
  console.log('expand: ', newExpandedKeys, event);
};
</script>

Dynamic loading

Load nodes dynamically.

Trunk 1

Trunk 2

Branch 2-1

Draggable

Draggable nodes.

Trunk 1

Branch 1-1

Leaf 1-1-1

Leaf 1-1-2

Branch 1-2

Leaf 1-2-1

<template>
  <tu-tree draggable blockNode :data="treeData" @drop="onDrop" />
</template>

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

const treeData = ref([
  {
    title: 'Trunk 1',
    key: '1',
    children: [
      {
        title: 'Branch 1-1',
        key: '1-1',
        children: [
          {
            title: 'Leaf 1-1-1',
            key: '1-1-1'
          },
          {
            title: 'Leaf 1-1-2',
            key: '1-1-2'
          }
        ]
      },
      {
        title: 'Branch 1-2',
        key: '1-2',
        children: [
          {
            title: 'Leaf 1-2-1',
            key: '1-2-1'
          }
        ]
      }
    ]
  }
]);

const onDrop = ({ dragNode, dropNode, dropPosition }) => {
  const data = treeData.value;
  const loop = (data, key, callback) => {
    data.some((item, index, arr) => {
      if (item.key === key) {
        callback(item, index, arr);
        return true;
      }
      if (item.children) {
        return loop(item.children, key, callback);
      }
      return false;
    });
  };

  loop(data, dragNode.key, (_, index, arr) => {
    arr.splice(index, 1);
  });

  if (dropPosition === 0) {
    loop(data, dropNode.key, (item) => {
      item.children = item.children || [];
      item.children.push(dragNode);
    });
  } else {
    loop(data, dropNode.key, (_, index, arr) => {
      arr.splice(dropPosition < 0 ? index : index + 1, 0, dragNode);
    });
  }
};
</script>

<template>
  <tu-tree draggable blockNode :data="treeData" @drop="onDrop" />
</template>

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

const treeData = ref([
  {
    title: 'Trunk 1',
    key: '1',
    children: [
      {
        title: 'Branch 1-1',
        key: '1-1',
        children: [
          {
            title: 'Leaf 1-1-1',
            key: '1-1-1'
          },
          {
            title: 'Leaf 1-1-2',
            key: '1-1-2'
          }
        ]
      },
      {
        title: 'Branch 1-2',
        key: '1-2',
        children: [
          {
            title: 'Leaf 1-2-1',
            key: '1-2-1'
          }
        ]
      }
    ]
  }
]);

const onDrop = ({ dragNode, dropNode, dropPosition }) => {
  const data = treeData.value;
  const loop = (data, key, callback) => {
    data.some((item, index, arr) => {
      if (item.key === key) {
        callback(item, index, arr);
        return true;
      }
      if (item.children) {
        return loop(item.children, key, callback);
      }
      return false;
    });
  };

  loop(data, dragNode.key, (_, index, arr) => {
    arr.splice(index, 1);
  });

  if (dropPosition === 0) {
    loop(data, dropNode.key, (item) => {
      item.children = item.children || [];
      item.children.push(dragNode);
    });
  } else {
    loop(data, dropNode.key, (_, index, arr) => {
      arr.splice(dropPosition < 0 ? index : index + 1, 0, dragNode);
    });
  }
};
</script>

Checked strategy

Setting checkedStrategy attribute to set the return value when selected.

Show allShow parentShow child

Current: []

<template>
  <tu-radio-group
    class="mb-2"
    type="button"
    v-model="checkedStrategy"
    @change="
      () => {
        checkedKeys = [];
      }
    "
  >
    <tu-radio label="all">Show all</tu-radio>
    <tu-radio label="parent">Show parent</tu-radio>
    <tu-radio label="child">Show child</tu-radio>
  </tu-radio-group>

  <tu-tree
    checkable
    v-model:checked-keys="checkedKeys"
    :data="treeData"
    :checked-strategy="checkedStrategy"
  />

  <p>Current: {{ checkedKeys }}</p>
</template>

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

const treeData = [
  {
    title: 'Trunk 1',
    key: '1',
    children: [
      {
        title: 'Branch 1-1',
        key: '1-1',
        children: [
          {
            title: 'Leaf 1-1-1',
            key: '1-1-1'
          },
          {
            title: 'Leaf 1-1-2',
            key: '1-1-2'
          }
        ]
      },
      {
        title: 'Branch 1-2',
        key: '1-2',
        children: [
          {
            title: 'Leaf 1-2-1',
            key: '1-2-1'
          }
        ]
      }
    ]
  }
];

const checkedKeys = ref([]);
const checkedStrategy = ref('all');
</script>

<template>
  <tu-radio-group
    class="mb-2"
    type="button"
    v-model="checkedStrategy"
    @change="
      () => {
        checkedKeys = [];
      }
    "
  >
    <tu-radio label="all">Show all</tu-radio>
    <tu-radio label="parent">Show parent</tu-radio>
    <tu-radio label="child">Show child</tu-radio>
  </tu-radio-group>

  <tu-tree
    checkable
    v-model:checked-keys="checkedKeys"
    :data="treeData"
    :checked-strategy="checkedStrategy"
  />

  <p>Current: {{ checkedKeys }}</p>
</template>

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

const treeData = [
  {
    title: 'Trunk 1',
    key: '1',
    children: [
      {
        title: 'Branch 1-1',
        key: '1-1',
        children: [
          {
            title: 'Leaf 1-1-1',
            key: '1-1-1'
          },
          {
            title: 'Leaf 1-1-2',
            key: '1-1-2'
          }
        ]
      },
      {
        title: 'Branch 1-2',
        key: '1-2',
        children: [
          {
            title: 'Leaf 1-2-1',
            key: '1-2-1'
          }
        ]
      }
    ]
  }
];

const checkedKeys = ref([]);
const checkedStrategy = ref('all');
</script>

Show line

Setting the showLine attribute to display the connecting line.

Trunk 1

Branch 1-1

Leaf 1-1-1

Leaf 1-1-2

Leaf 1-1-2-1

Leaf 1-1-3

Branch 1-2

Branch 1-3

Leaf 1-3-1

Leaf 1-3-2

Trunk 2

Trunk 3

Branch 3-1

Leaf 3-1-1

Leaf 3-1-2

<template>
  <tu-tree show-line :data="treeData" />
</template>

<script lang="ts" setup>
const treeData = [
  {
    title: 'Trunk 1',
    key: '1',
    children: [
      {
        title: 'Branch 1-1',
        key: '1-1',
        children: [
          { title: 'Leaf 1-1-1', key: '1-1-1' },
          {
            title: 'Leaf 1-1-2',
            key: '1-1-2',
            children: [{ title: 'Leaf 1-1-2-1', key: '1-1-2-1' }]
          },
          { title: 'Leaf 1-1-3', key: '1-1-3' }
        ]
      },
      {
        title: 'Branch 1-2',
        key: '1-2'
      },
      {
        title: 'Branch 1-3',
        key: '1-3',
        children: [
          { title: 'Leaf 1-3-1', key: '1-3-1' },
          {
            title: 'Leaf 1-3-2',
            key: '1-3-2'
          }
        ]
      }
    ]
  },
  {
    title: 'Trunk 2',
    key: '2'
  },
  {
    title: 'Trunk 3',
    key: '3',
    children: [
      {
        title: 'Branch 3-1',
        key: '3-1',
        children: [
          { title: 'Leaf 3-1-1', key: '3-1-1' },
          { title: 'Leaf 3-1-2', key: '3-1-2' }
        ]
      }
    ]
  }
];
</script>

<template>
  <tu-tree show-line :data="treeData" />
</template>

<script lang="ts" setup>
const treeData = [
  {
    title: 'Trunk 1',
    key: '1',
    children: [
      {
        title: 'Branch 1-1',
        key: '1-1',
        children: [
          { title: 'Leaf 1-1-1', key: '1-1-1' },
          {
            title: 'Leaf 1-1-2',
            key: '1-1-2',
            children: [{ title: 'Leaf 1-1-2-1', key: '1-1-2-1' }]
          },
          { title: 'Leaf 1-1-3', key: '1-1-3' }
        ]
      },
      {
        title: 'Branch 1-2',
        key: '1-2'
      },
      {
        title: 'Branch 1-3',
        key: '1-3',
        children: [
          { title: 'Leaf 1-3-1', key: '1-3-1' },
          {
            title: 'Leaf 1-3-2',
            key: '1-3-2'
          }
        ]
      }
    ]
  },
  {
    title: 'Trunk 2',
    key: '2'
  },
  {
    title: 'Trunk 3',
    key: '3',
    children: [
      {
        title: 'Branch 3-1',
        key: '3-1',
        children: [
          { title: 'Leaf 3-1-1', key: '3-1-1' },
          { title: 'Leaf 3-1-2', key: '3-1-2' }
        ]
      }
    ]
  }
];
</script>

Node icon

The icon of a node can be specified globally via the icon slot of the tree, or individually via the icon property of the node.

Trunk 1

Branch 1-1

Leaf 1-1-1

Leaf 1-1-2

Branch 1-2

Leaf 1-2-1

Component icons

The node icons loadingIcon, switcherIcon, support customization at the two latitudes of tree and node at the same time, and node has a higher priority.

Trunk 1

Branch 1-1

Leaf 1-1-1

Leaf 1-1-2

Branch 1-2

Leaf 1-2-1

Extra node

Tree provides Slot named extra, which can customize extra content on the node.

Trunk 1

Branch 1-1

Leaf 1-1-1

Leaf 1-1-2

Branch 1-2

Leaf 1-2-1

<template>
  <tu-tree block-node :data="treeData">
    <template #extra="nodeData">
      <tu-button class="ml-2" size="mini" @click="() => handleAdd(nodeData)">
        <template #icon><Plus /></template>
      </tu-button>
    </template>
  </tu-tree>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Plus } from '@tu-view-plus/icons-vue';

const treeData = ref([
  {
    title: 'Trunk 1',
    key: '1',
    children: [
      {
        title: 'Branch 1-1',
        key: '1-1',
        disabled: true,
        children: [
          {
            title: 'Leaf 1-1-1',
            key: '1-1-1'
          },
          {
            title: 'Leaf 1-1-2',
            key: '1-1-2'
          }
        ]
      },
      {
        title: 'Branch 1-2',
        key: '1-2',
        children: [
          {
            title: 'Leaf 1-2-1',
            key: '1-2-1'
          }
        ]
      }
    ]
  }
]);

const handleAdd = (nodeData) => {
  const children = nodeData.children || [];
  children.push({
    title: 'New node',
    key: `${nodeData.key}-${children.length + 1}`
  });
  nodeData.children = children;

  treeData.value = [...treeData.value];
};
</script>

<template>
  <tu-tree block-node :data="treeData">
    <template #extra="nodeData">
      <tu-button class="ml-2" size="mini" @click="() => handleAdd(nodeData)">
        <template #icon><Plus /></template>
      </tu-button>
    </template>
  </tu-tree>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Plus } from '@tu-view-plus/icons-vue';

const treeData = ref([
  {
    title: 'Trunk 1',
    key: '1',
    children: [
      {
        title: 'Branch 1-1',
        key: '1-1',
        disabled: true,
        children: [
          {
            title: 'Leaf 1-1-1',
            key: '1-1-1'
          },
          {
            title: 'Leaf 1-1-2',
            key: '1-1-2'
          }
        ]
      },
      {
        title: 'Branch 1-2',
        key: '1-2',
        children: [
          {
            title: 'Leaf 1-2-1',
            key: '1-2-1'
          }
        ]
      }
    ]
  }
]);

const handleAdd = (nodeData) => {
  const children = nodeData.children || [];
  children.push({
    title: 'New node',
    key: `${nodeData.key}-${children.length + 1}`
  });
  nodeData.children = children;

  treeData.value = [...treeData.value];
};
</script>

Virtual list

Setting the virtualListProps attribute to display virtual list

Searchable

Show how to achieve the search tree effect.

<template>
  <tu-input
    class="mb-2"
    placeholder="Please input"
    allow-clear
    v-model="searchKey"
  >
  </tu-input>

  <tu-tree :data="treeData">
    <template #title="nodeData">
      <template v-if="((index = getMatchIndex(nodeData?.title)), index < 0)">
        {{ nodeData?.title }}
      </template>
      <template v-else>
        <span> {{ nodeData?.title?.substr(0, index) }}</span>
        <span style="color: #5e7ce0">
          {{ nodeData?.title?.substr(index, searchKey.length) }}
        </span>
        <span> {{ nodeData?.title?.substr(index + searchKey.length) }}</span>
      </template>
    </template>
  </tu-tree>
</template>

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

const originTreeData = [
  {
    title: 'Trunk 1',
    key: '1',
    children: [
      {
        title: 'Branch 1-1',
        key: '1-1',
        children: [
          {
            title: 'Leaf 1-1-1',
            key: '1-1-1'
          },
          {
            title: 'Leaf 1-1-2',
            key: '1-1-2'
          }
        ]
      },
      {
        title: 'Branch 1-2',
        key: '1-2',
        children: [
          {
            title: 'Leaf 1-2-1',
            key: '1-2-1'
          }
        ]
      }
    ]
  }
];

const searchKey = ref('');

const treeData = computed(() => {
  if (!searchKey.value) return originTreeData;
  return handleSearch(searchKey.value);
});

const handleSearch = (keyword) => {
  const loop = (data) => {
    const result = [];
    data.forEach((item) => {
      if (item.title.toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
        result.push({ ...item });
      } else if (item.children) {
        const filterData = loop(item.children);
        if (filterData.length) {
          result.push({
            ...item,
            children: filterData
          });
        }
      }
    });
    return result;
  };

  return loop(originTreeData);
};

const getMatchIndex = (title) => {
  if (!searchKey.value) return -1;
  return title.toLowerCase().indexOf(searchKey.value.toLowerCase());
};
</script>

<template>
  <tu-input
    class="mb-2"
    placeholder="Please input"
    allow-clear
    v-model="searchKey"
  >
  </tu-input>

  <tu-tree :data="treeData">
    <template #title="nodeData">
      <template v-if="((index = getMatchIndex(nodeData?.title)), index < 0)">
        {{ nodeData?.title }}
      </template>
      <template v-else>
        <span> {{ nodeData?.title?.substr(0, index) }}</span>
        <span style="color: #5e7ce0">
          {{ nodeData?.title?.substr(index, searchKey.length) }}
        </span>
        <span> {{ nodeData?.title?.substr(index + searchKey.length) }}</span>
      </template>
    </template>
  </tu-tree>
</template>

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

const originTreeData = [
  {
    title: 'Trunk 1',
    key: '1',
    children: [
      {
        title: 'Branch 1-1',
        key: '1-1',
        children: [
          {
            title: 'Leaf 1-1-1',
            key: '1-1-1'
          },
          {
            title: 'Leaf 1-1-2',
            key: '1-1-2'
          }
        ]
      },
      {
        title: 'Branch 1-2',
        key: '1-2',
        children: [
          {
            title: 'Leaf 1-2-1',
            key: '1-2-1'
          }
        ]
      }
    ]
  }
];

const searchKey = ref('');

const treeData = computed(() => {
  if (!searchKey.value) return originTreeData;
  return handleSearch(searchKey.value);
});

const handleSearch = (keyword) => {
  const loop = (data) => {
    const result = [];
    data.forEach((item) => {
      if (item.title.toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
        result.push({ ...item });
      } else if (item.children) {
        const filterData = loop(item.children);
        if (filterData.length) {
          result.push({
            ...item,
            children: filterData
          });
        }
      }
    });
    return result;
  };

  return loop(originTreeData);
};

const getMatchIndex = (title) => {
  if (!searchKey.value) return -1;
  return title.toLowerCase().indexOf(searchKey.value.toLowerCase());
};
</script>

Customize data

You can customize data by fieldNames.

Trunk 1

Branch 1-1

Leaf 1-1-1

Leaf 1-1-2

Branch 1-2

Leaf 1-2-1

Size

Trees of different sizes.

MiniSmallMediumLarge

Tree API

Tree Attributes

Name	Description	Type	Default
size	Size	`String`	medium
block-node	Whether the node occupies a row	`Boolean`	false
default-expand-all	Whether to expand the parent node by default	`Boolean`	true
multiple	Whether to support multiple selection	`Boolean`	false
checkable	Whether to add a checkbox before the node	`Boolean`	false
selectable	Whether to support selection	`Boolean`	true
check-strictly	Whether to cancel the parent-child node association	`Boolean`	false
checked-strategy	Customized backfill method all: return all selected nodes parent: return only parent node when both parent and child nodes are selected child: return only child nodes	`String`	all
default-selected-keys	Tree node selected by default	`Array`	-
selected-keys / v-model	Selected tree node	`Array`	-
default-checked-keys	Tree node with checkbox selected by default	`Array`	-
checked-keys / v-model	Tree node with check box selected	`Array`	-
default-expanded-keys	Nodes expanded by default	`Array`	-
expanded-keys / v-model	Expanded node	`Array`	-
data	Pass in data to generate the corresponding tree structure	`Array`	[]
field-names	Specify the field name in the node data	`Object`	-
show-line	Whether to display the connection line	`Boolean`	false
load-more	A callback for loading data asynchronously, returning a Promise	`Function`	-
draggable	Whether it can be dragged	`Boolean`	false
allow-drop	Whether to allow release on a node when dragging	`Function`	-
virtual-list-props	Pass virtual list properties, pass in this parameter to turn on virtual scrolling, VirtualListProps	`Object`	-
default-expand-selected	Whether to expand the parent node of the selected node by default	`Boolean`	false
default-expand-checked	Whether to expand the parent node of the checked node by default	`Boolean`	false
auto-expand-parent	Whether to automatically expand the parent node of the expanded node	`Boolean`	true
half-checked-keys / v-model	The keys of half checked. Only valid when checkable and checkStrictly	`Array`	-
only-check-leaf	When enabled, checkedKeys is only for checked leaf nodes, and the status of the parent node is determined by the child node.(Only valid when checkable and checkStrictly is false)	`Boolean`	false
animation	Whether to enable expand transition animation	`Boolean`	true
action-on-node-click	The action triggered when the node is clicked	`String`	-

Tree Events

Name	Description	Type
select	Triggered when the tree node is clicked	`Function`
check	Triggered when the tree node checkbox is clicked.	`Function`
expand	expand/close	`Function`
drag-start	Node starts dragging	-
drag-end	Node end drag	`Function`
drag-over	The node is dragged to the releasable target	`Function`
drag-leave	Node leaves to release the target	`Function`
drop	The node is released on a releasable target	`Function`

Tree Methods

Name	Description	Type	Return
scrollIntoView	Virtual list scroll to an element	`Function`	-
getSelectedNodes	Get selected nodes	-	TreeNodeData[]
getCheckedNodes	Get checked nodes. Supports passing in checkedStrategy, if not passed, the configuration of the component is taken.	`Function`	TreeNodeData[]
getHalfCheckedNodes	Get half checked nodes	-	TreeNodeData[]
getExpandedNodes	Get expanded nodes	-	TreeNodeData[]
checkAll	Set the checkbox state of all nodes	`Function`	-
checkNode	Sets the checkbox state of the specified node	`Function`	-
selectAll	Set the selected state of all nodes	`Function`	-
selectNode	Sets the selected state of the specified node	`Function`	-
expandAll	Set the expanded state of all nodes	`Function`	-
expandNode	Sets the expanded state of the specified node	`Function`	-

Tree Slots

Name	Description	Params
title	Title	-
extra	Render additional node content	-
drag-icon	Custom drag icon	`node`
loading-icon	Custom loading icon	-
switcher-icon	Custom switcher icon	-
icon	Custom node icon	`node`

TreeNodeData

Name	Description	Type	Return
key	Unique key	`StringNumber`	-
title	The title of the node	`String`	-
selectable	Whether to allow selection	`Boolean`	false
disabled	Whether to disable the node	`Boolean`	false
disableCheckbox	Whether to disable the checkbox	`Boolean`	false
checkable	Whether to show checkbox	`Boolean`	false
draggable	Whether it can be dragged	`Boolean`	false
isLeaf	Whether it is a leaf node. Effective when loading dynamically	`Boolean`	false
icon	Node icon	`Function`	-
switcherIcon	Custom switcher icon, priority is greater than tree	`Function`	-
loadingIcon	Customize loading icon, priority is greater than tree	`Function`	-
dragIcon	Custom drag icon, priority is greater than tree	`Function`	-
children	Child node	`Array`	-

TreeFieldNames

Name	Description	Type	Return
key	Specify the field name of key in TreeNodeData	`String`	key
title	Specify the field name of title in TreeNodeData	`String`	title
disabled	Specify the field name of disabled in TreeNodeData	`String`	disabled
children	Specify the field name of children in TreeNodeData	`String`	children
isLeaf	Specify the field name of isLeaf in TreeNodeData	`String`	isLeaf
disableCheckbox	Specify the field name of disableCheckbox in TreeNodeData	`String`	disableCheckbox
checkable	Specify the field name of checkable in TreeNodeData	`String`	checkable
icon	Specify the field name of icon in TreeNodeData	`String`	checkable

VirtualListProps

Name	Description	Type	Default
height	Viewable area height	`NumberString`	-
threshold	The threshold of the number of elements to enable virtual scrolling. When the number of data is less than the threshold, virtual scrolling will not be enabled.	`Number`	-
isStaticItemHeight	Is the element height fixed	`Boolean`	false
fixedSize	Is the element height fixed.	`Boolean`	false
estimatedSize	Is the element height fixed.	`Number`	-
buffer	The number of elements mounted in advance outside the boundary of the viewport.	`Number`	10

Tree ​

Basic usage ​

Block node ​

Multiple Select ​

Checkable ​

V-model ​

Dynamic loading ​

Draggable ​

Checked strategy ​

Show line ​

Node icon ​

Component icons ​

Extra node ​

Virtual list ​

Searchable ​

Customize data ​

Size ​

Tree API ​

Tree Attributes ​

Tree Events ​

Tree Methods ​

Tree Slots ​

TreeNodeData ​

TreeFieldNames ​

VirtualListProps ​

Tree

Basic usage

Block node

Multiple Select

Checkable

V-model

Dynamic loading

Draggable

Checked strategy

Show line

Node icon

Component icons

Extra node

Virtual list

Searchable

Customize data

Size

Tree API

Tree Attributes

Tree Events

Tree Methods

Tree Slots

TreeNodeData

TreeFieldNames

VirtualListProps