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

插件名称	vue-tree
版本号	v3.0.3
发布时间	2020年12月22日
插件作者	grapoza

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

安装和下载：

# 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/);
  }
}