<template>
    <div class="wrap">
        <el-tree default-expand-all style="max-width: 600px" :data="data" :props="defaultProps"
            @node-click="handleNodeClick" />
    </div>
</template>

<script setup>
    import { ref, onMounted } from 'vue'
    const handleNodeClick = (data) => {
        console.log(data)
    }

    const data = [
        {
            label: 'Level one 1',
            children: [
                {
                    label: 'Level two 1-1',
                },
            ],
        },
        {
            label: 'Level one 2',
            children: [
                {
                    label: 'Level two 2-1',
                },
                {
                    label: 'Level two 2-2',
                },
            ],
        },
        {
            label: 'Level one 3',
            children: [
                {
                    label: 'Level two 3-1',
                },
                {
                    label: 'Level two 3-2',
                },
            ],
        },
    ]

    const defaultProps = {
        children: 'children',
        label: 'label',
    }
</script>

<style lang="scss" scoped>
    .wrap {
        padding: 15px;
        height: calc(100vh - 251px);
        background: #ffffff;
    }
</style>