Vue-easy-tree封装及使用

<template>
  <div>
    <vue-easy-tree
      :tree-data="treeData"
      :options="options"
      @select-change="handleSelectChange"
    ></vue-easy-tree>
  </div>
</template>
 
<script>
import VueEasyTree from 'vue-easy-tree';
 
export default {
  components: {
    VueEasyTree
  },
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: 'Node 1',
          children: [
            { id: 2, label: 'Node 1.1' },
            { id: 3, label: 'Node 1.2' }
          ]
        }
      ],
      options: {
        checkbox: true,
        // 其他配置项...
      }
    };
  },
  methods: {
    handleSelectChange(selectedNodes) {
      console.log('Selected nodes:', selectedNodes);
      // 处理选中节点变化的逻辑...
    }
  }
};
</script>

这个例子展示了如何在Vue组件中引入vue-easy-tree组件，并设置基本的树形数据和配置选项。同时，它演示了如何监听节点的选中状态变化，并在handleSelectChange方法中处理相关的逻辑。