vue treeview

树 (vue-tree)

vue-tree is a Vue component that implements a TreeView control. Its aim is to provide common tree options in a way that is easy to use and easy to customize.

vue-tree是实现TreeView控件的Vue组件。 其目的是以易于使用和易于定制的方式提供常见的树选项。

The Component is still pre-1.0 and should be considered unstable. Breaking changes may occur at any time before the 1.0 release.

该组件仍为1.0之前的版本，应视为不稳定。 1.0版本之前的任何时候都可能发生重大更改。

安装 (Installation)

Install the component with your favorite package manager:

使用您喜欢的软件包管理器安装组件：

yarn add @grapoza/vue-tree

or

要么

npm install --save @grapoza/vue-tree

The default import from this package is the components from the .vue files. In addition to this, pre-compiled versions of the TreeView component and CSS are also available in the package but you will need to reference them manually from your own project.

从此程序包的默认导入是.vue文件中的组件。 除此之外，软件包中还提供了TreeView组件和CSS的预编译版本，但是您需要从自己的项目中手动引用它们。

用法 (Usage)

If you're using it in a .vue file:

如果在.vue文件中使用它：

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

<script>
import TreeView from "@grapoza/vue-tree"

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

Or, import it into your application:

或者，将其导入您的应用程序：

import TreeView from "@grapoza/vue-tree"
Vue.use(TreeView)

Then add the component:

然后添加组件：

<tree-view id="my-tree" :model="dataModel"></tree-view>

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

翻译自: https://vuejsexamples.com/a-vue-component-that-implements-a-treeview-control/

vue treeview