<template>
  <div>
    <hive-tree
      :data="data2"
      selectable
      @onExpand="toggles"
      @onChange="checkchanges"
      @onNodeClick="click"
    ></hive-tree>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        data2: [
          {
            text: '001',
            expand: true,
            children: [
              {
                text: '000-000',
                children: [
                  {
                    text: '000-000-000',
                    children: [
                      { text: '000-000-000-000' },
                      { text: '000-111-000-000' },
                      { text: '000-222-000-000' },
                    ],
                  },
                  { text: '000-111-000' },
                  { text: '000-222-000' },
                ],
              },
              { text: '000-111' },
              { text: '000-222' },
            ],
          },
          {
            text: '111',
            expand: false,
            children: [
              { text: '111-000' },
              { text: '111-111' },
              { text: '111-222' },
            ],
          },
        ],
      };
    },
    methods: {
      toggles(e) {
        console.log(e);
      },
      click(e) {
        console.log(e);
      },
      checkchanges(e, node) {
        console.log(e);
        console.log(node);
      },
    },
  };
</script>
