<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-tree style="max-width: 600px" :data="typeTree" :props="{ children: 'children', label: 'label' }" @node-click="handleNodeClick" />
      </el-col>
      <el-col :span="18"></el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';

/* --------------- data --------------- */
// #region

let typeTree = reactive([
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
]);

// #endregion

/* --------------- methods --------------- */
const handleNodeClick = (data) => {
  console.log(data);
};
// #region

// #endregion
</script>

<style lang="scss" scoped></style>
