树状 Tree ​

<template>
    <Tree ref="treeRef" :data="list" label="name" value="id" />
</template>
<script setup lang="ts">
import data from './data.json'

const list = data
</script>

<template>
    <Space direction="vertical">
        <Tree ref="treeEl" :data="list" :default-checked-keys="checkedKeys" checkbox label="name" value="id" />
        <Space>
            <Button type="primary" @click="handleSetKey">通过node-key设置选中</Button>
            <Button type="primary" @click="handleGetNodes">获取选中项的数据数组</Button>
            <Button type="primary" @click="handleGetKeys">获取选中项的keys数组</Button>
            <Button type="primary" @click="handleReset">清空选中项</Button>
        </Space>
    </Space>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import data from './data.json'
import type { TreeComponent } from 'usuuu'

/**
 * 设置选中值
 */
const checkedKeys = ['4', '3']
/**
 * Tree实例
 */
const treeEl = ref<TreeComponent | null> (null)
/**
 * 数据
 */
const list = data
/**
 * 通过node-key设置选中
 */
const handleSetKey = () => {
    if (treeEl.value) {
        treeEl.value.setSelectKeys([1, 4])
    }
}
/**
 * 获取选中项的数据数组
 */
const handleGetNodes = () => {
    if (treeEl.value) {
        const nodes = treeEl.value.getSelectNodes()
        console.log(nodes)
    }
}
/**
 * 获取选中项的keys数组
 */
const handleGetKeys = () => {
    if (treeEl.value) {
        const keys = treeEl.value!.getSelectKeys()
        console.log(keys)
    }
}
/**
 * 清空选中项
 */
const handleReset = () => {
    if (treeEl.value) {
        treeEl.value.clearSelect()
    }
}
</script>

<template>
    <Space direction="vertical" full-width>
        <p class="value">展示</p>
        <Tree ref="treeRef" :data="list" line label="name" value="id" />
        <p class="value">可选</p>
        <Tree ref="treeRef" :data="list" line checkbox label="name" value="id" />
    </Space>
</template>
<script setup lang="ts">
import data from './data.json'

const list = data
</script>