<template>
    <div>
        <div class="bigBox">
            <div class="loadBox">
                <img style="display: block;width: 20px;height: 20px;" src="../../../assets/icon/module.png" alt="">
                <span style="font-size: 16px;display: block;">
                    间隔模型管理
                </span>
            </div>
            <div class="treeBox">
                <el-tree class="treeData" :data="moduleData" :props="defaultProps" @node-click="handleNodeClick" />
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue';
export default {
    setup() {
        let moduleData = ref([
            {
                label: "测试",
                id: "1",
                children: [
                    {
                        label: "测试1",
                        id: '11'
                    }
                ]
            }
        ])//树形数据
        let defaultProps = ref({//树形默认props
            label: "label",
            children: "children",
            id: "id"
        })
        function handleNodeClick(e) {//树形点击方法
            console.log(e, 'row');
        }
        return {
            moduleData,//树形数据
            defaultProps,//树形默认props
            handleNodeClick,//树形点击方法
        }
    }
}
</script>

<style scoped>
.bigBox {
    width: 100%;
    height: 100%;
    text-align: center;
}

.loadBox {
    width: 50%;
    height: 30px;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.treeBox{
    width: 50%;
    height: auto;
    margin: 0 auto;
}
.treeData{
    background-color: #F7F8FB;
    width: calc(100% - 100px);
}
</style>