一个简单而功能齐全且高度可定制的Vue树形视图组件。

更多功能：

• 使用预编译的脚本在现代浏览器中运行，或者可以包含在babel / webpack链中。
• 可扩展节点
• 选框
• 单选按钮
• 节点选择
• 节点的添加和删除
• 节点内容的插槽
• 剥皮
• 子节点的异步加载
• 遵循ARIA的树形视图可访问性准则
• 拖放（单个节点，在树之间工作）

安装和下载：

# Yarn
$ yarn add @grapoza/vue-tree

# NPM
$ npm i @grapoza/vue-tree

如何使用它：

1.导入vue树。

import TreeView from "@grapoza/vue-tree"

2.注册组件。

export default {
  components: {
    TreeView
  }
}

3.将树视图组件添加到应用程序模板。

<template>
  <tree-view id="example" :initial-model="dataModel"></tree-view>
</template>

4.将节点添加到树视图。

export default {
  components: {
    TreeView
  },
  data() {
    return {
      dataModel: [
        {id: "numberOrString", label: "Root Node", children: [
        {id: 1, label: "Child Node"},
        {id: 2, label: "Second Child"}]
        }
      ]
    }
  }
}

5.所有默认树道具。

initialModel: {
  type: Array,
  required: true
},
modelDefaults: {
  type: Object,
  required: false,
  default: function () { return {}; }
},
selectionMode: {
  // none, 'single', 'selectionFollowsFocus', or 'multiple'
  type: String,
  required: false,
  default: SelectionMode.None,
  validator: function (value) {
    return Object.values(SelectionMode).includes(value);
  }
},
skinClass: {
  type: String,
  required: false,
  default: 'default-tree-view-skin',
  validator: function (value) {
    return value === null || !value.match(/\s/);
  }
}

变更日志：

v3.0.0（01/24/2021）

• 更新面向公众的位以减小大小

---

官网：https://github.com/grapoza/vue-tree

演示：https://www.vue365.cn/code_demo.php?id=3559

GitHub下载：https://github.com/grapoza/vue-tree/archive/master.zip