TreeSelect

Matches Arco TreeSelect with a Select-style control and Arco-style tree nodes. See the Element Plus docs for props.

Single Selection

Open the tree and select a leaf node.

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('tokens')
const data = [
  { value: 'design', label: 'Design', children: [{ value: 'tokens', label: 'Tokens' }, { value: 'components', label: 'Components' }] },
  { value: 'engineering', label: 'Engineering', children: [{ value: 'testing', label: 'Testing' }] },
]
</script>

<template>
  <el-tree-select v-model="value" :data="data" :show-arrow="false" placeholder="Select a topic" style="width: 280px" />
</template>

Multiple Selection

Combine multiple and show-checkbox to select several nodes.

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(['tokens'])
const data = [
  { value: 'design', label: 'Design', children: [{ value: 'tokens', label: 'Tokens' }, { value: 'components', label: 'Components' }] },
  { value: 'engineering', label: 'Engineering', children: [{ value: 'testing', label: 'Testing' }] },
]
</script>

<template>
  <el-tree-select v-model="value" :data="data" multiple show-checkbox :show-arrow="false" style="width: 320px" />
</template>

Differences from Arco

• Tree selection behavior and default indentation follow Element Plus.