Tree

Matches Arco Tree with title hover backgrounds and primary selected text. See the Element Plus docs for props.

Basic Tree

Highlight-current marks the selected node; an indent of 22 matches Arco.

Design

Tokens

Components

Engineering

<script setup lang="ts">
const data = [
  { id: 1, label: 'Design', children: [{ id: 11, label: 'Tokens' }, { id: 12, label: 'Components', disabled: true }] },
  { id: 2, label: 'Engineering', children: [{ id: 21, label: 'Testing' }] },
]
</script>

<template>
  <el-tree :data="data" node-key="id" :default-expanded-keys="[1]" :indent="22" highlight-current style="width: 100%" />
</template>

Checkbox Tree

Show-checkbox matches Arco checkable; disabled nodes cannot be checked.

Design

Tokens

Components

Engineering

<script setup lang="ts">
const data = [
  { id: 1, label: 'Design', children: [{ id: 11, label: 'Tokens' }, { id: 12, label: 'Components', disabled: true }] },
  { id: 2, label: 'Engineering', children: [{ id: 21, label: 'Testing' }] },
]
</script>

<template>
  <el-tree :data="data" node-key="id" show-checkbox :default-expanded-keys="[1]" :default-checked-keys="[11]" :indent="22" style="width: 100%" />
</template>

Differences from Arco

• Indentation defaults to 18px; set indent to 22 to match Arco.
• Disabled nodes without checkboxes keep their Element Plus appearance; expand icons differ from Arco.