vuejs浏览器查看比例_高度可定制的vuejs树查看器

最新推荐文章于 2022-05-18 17:35:15 发布

cuk5239

最新推荐文章于 2022-05-18 17:35:15 发布

阅读量253

点赞数

文章标签： java python vue javascript jquery ViewUI

原文链接：https://vuejsexamples.com/a-highly-customizable-vuejs-tree-viewer/

版权

vuejs浏览器查看比例

VueJS树 (VueJS Tree)

A highly customizable and blazing fast VueJs tree viewer.

高度可定制且快速的VueJs树查看器。

入门 (Getting Started)

安装 (Install)

You can install using yarn:

您可以使用yarn进行安装：

$ yarn add vuejs-tree

or with npm:

或使用npm：

$ npm install vuejs-tree

用法 (Usage)

Add the following lines at the top of your .js file who contain your Vue instance.

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

import Tree from 'vuejs-tree'
  Vue.use(Tree)

  // in your vue instance
  methods: {
    getTree: function(treeId) {
      for (var i = 0; i <= this.$children.length - 1; i++) {
        if (this.$children[i].$props.id == treeId) return this.$children[i]
      }
    }
  }

Or add the following lines in your Vue instance.

或在Vue实例中添加以下行。

import Tree from 'vuejs-tree'


  // in your vue instance
  components: {
    'tree': Tree
  },
  methods: {
    getTree: function(treeId) {
      for (var i = 0; i <= this.$children.length - 1; i++) {
        if (this.$children[i].$props.id == treeId) return this.$children[i]
      }
    }
  }

Then add the following line in your html file to generate a tree. You can have as many trees per page as you want.

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

<tree id="my-tree-id" :custom-options="myCustomOptions" :nodes="treeDisplayData"></tree>

数据结构 (Data Structure)

You need to define data to display which is a nested array of hash.

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

Example:

例：

var nodes = [
  {
    text: "Root 1",
    nodes: [
      {
        text: "Child 1",
        nodes: [
          {
            text: "Grandchild 1"
          },
          {
            text: "Grandchild 2"
          }
        ]
      },
      {
        text: "Child 2"
      }
    ]
  },
  {
    text: "Root 2"
  }
];

节点属性 (Node properties)

Here is a fully customized node:

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

{
  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: [
    {},
    ...
  ]
}

The Following properties define a node level css and behavior.

以下属性定义节点级别CSS和行为。

ID (id)

String or Integer --> Mandatory

String或Integer -> Mandatory

Used in the tree to differentiate each nodes.

在树中用于区分每个节点。

名称 (name)

String --> Mandatory

String -> Mandatory

The text value displayed at the right of the node icons.

文本值显示在节点图标的右侧。

定义 (definition)

String --> Optional

String -> Optional

If some text is given, then it will show as a tooltip.

如果提供了一些文本，它将显示为工具提示。

深度 (depth)

Integer --> Optional

Integer -> Optional

It correspond to the node depth, starting from 0, 1 or anything. It's advisable to fill theses fields if somes of your nodes have the same id.

它对应于节点深度，从0、1或其他任何值开始。如果某些节点具有相同的ID，则建议填写这些字段。

残障人士 (disabled)

Boolean --> Optional, default: false

Boolean -> Optional ， default ：false

Used to specifie if the node is disabled or not.

用于指定是否禁用节点。

标签 (tags)

[Integer] --> Optional

[Integer] -> Optional

The tag is displayed at the right end of the line.

标签显示在该行的右端。