高度可定制的vuejs树查看器，用于扩展/折叠文件夹树。

安装和下载：

# Yarn
$ yarn add vuejs-tree

# NPM
$ npm install vuejs-tree --save

用法

在包含Vue实例的.js文件顶部添加以下行。

  import Tree from 'vuejs-tree'


  // 在vue实例中
  components: {
    'Tree': Tree
  },

然后在您的html文件中添加以下行以生成树。您可以根据需要在每页上拥有任意数量的树。

<Tree id="my-tree-id" ref="my-tree-ref" :custom-options="myCustomOptions" :custom-styles="myCustomStyles" :nodes="treeDisplayData"></Tree>

数据结构

您需要定义要显示的数据，它是哈希的嵌套数组。

例：

data: {
  treeDisplayData: [
    {
      text: 'Root 1',
      nodes: [
        {
          text: 'Child 1',
          nodes: [
            {
              text: 'Grandchild 1'
            },
            {
              text: 'Grandchild 2'
            }
          ]
        },
        {
          text: 'Child 2'
        }
      ]
    },
    {
      text: 'Root 2'
    }
  ]
}

节点属性

这是一个完全定制的节点：

{
  id: 1,
  text: 'Root 1',
  definition: 'First node',
  depth: 1,
  checkable: false,
  selectable: false,
  expandable: true,
  disabled: false,
  tags: [42],
  state: {
    checked: false,
    expanded: false,
    selected: false
  },
  nodes: [
    {},
    ...
  ]
}

变更日志：

v3.0.1 (07/17/2021)

• 更新 Vue 3

v2.0.3 (06/10/2021)

• 在 customOptions 中添加 rowIndent 键以更改应用于每个孩子的 <ul> 的 css。主要是为了能够修改树节点的缩进。
• 添加默认 text-align: left 以防止当节点的文本长度显着不同并且在父节点上有一个 text-align: center 时缩进混乱。

v2.0.1 (12/24/2020)

• 构建包源
• 添加回可扩展、可选择和可检查的选项

---

官网：https://github.com/scalia/vuejs-tree

GitHub下载：https://github.com/scalia/vuejs-tree/archive/master.zip