树选择 TreeSelect

对应 Arco TreeSelect：选择框与 Select 一致，面板内使用 Arco 风格的树节点。 属性用法见 Element Plus 文档。

单选树

点击选择框展开树，选择叶子节点。

<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 配合 show-checkbox 选择多个节点。

<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>

与 Arco 的差异

• 保留 Element Plus 的树选择交互和默认节点缩进。