vue-jstree

Vue-jstree 是一个基于 Vue.js 和 jstree 的树形组件库。它允许你在 Vue.js 应用中快速创建交互式的树形结构。你可以使用 Vue-jstree 来展示层级数据、文件目录、分类等等。

Vue-jstree 提供了丰富的配置选项和事件回调，使你可以自定义树形组件的外观和行为。你可以定义节点的图标、文本、状态等，还可以监听节点的点击、选择、展开等事件。

要使用 Vue-jstree，你需要先安装它，可以通过 npm 或 yarn 进行安装。然后在你的 Vue 组件中引入并注册 Vue-jstree，即可在模板中使用它。

以下是一个使用 Vue-jstree 的简单示例：

<template>
  <div>
    <vue-jstree :data="treeData" @select-node="handleSelectNode"></vue-jstree>
  </div>
</template>

<script>
import VueJstree from 'vue-jstree';

export default {
  components: {
    VueJstree
  },
  data() {
    return {
      treeData: [
        {
          id: 1,
          text: 'Node 1',
          children: [
            {
              id: 2,
              text: 'Node 1.1'
            },
            {
              id: 3,
              text: 'Node 1.2'
            }
          ]
        },
        {
          id: 4,
          text: 'Node 2'
        }
      ]
    };
  },
  methods: {
    handleSelectNode(node) {
      console.log('Selected node:', node);
    }
  }
};
</script>

在上面的示例中，我们引入了 VueJstree 组件，并在模板中使用它。通过设置 `data` 属性传递树形数据，并通过 `@select-node` 监听节点选择事件。

这只是一个简单的示例，你可以根据自己的需求进一步定制和使用 Vue-jstree。希望对你有帮助！