强大的树视图组件– vue-tree

强大的树视图组件– vue-tree
插件名称 vue-tree
版本号 v3.0.0
发布时间 2020年12月22日
插件作者 grapoza

一个简单而功能齐全且高度可定制的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)

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