vue 结构树组件_树结构的Vue组件

最新推荐文章于 2026-05-22 12:13:04 发布

翻译最新推荐文章于 2026-05-22 12:13:04 发布 · 2.6k 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://vuejsexamples.com/a-vue-component-for-tree-structure/

标签

#vue #js #react #javascript #小程序

本文介绍了Vue树列表组件`vue-tree-list`，它支持创建树结构，添加treenode和leafnode，编辑节点名称，并且具备拖动功能。组件提供了默认节点名称设置以及点击事件，还可以通过配置禁止拖动。

vue 结构树组件

Vue树列表 (vue-tree-list)

A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.

树结构的Vue组件。支持添加treenode / leafnode，编辑节点名称并拖动。

View Demo 查看演示 Download Source 下载源

用 (use)

npm install vue-tree-list

<button @click="addNode">Add Node</button>
<vue-tree-list @click="onClick" :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree-list>
<button @click="getNewTree">Get new tree</button>
<pre>
  {{newTree}}
</pre>
...
import { VueTreeList, Tree, TreeNode } from '../src'
export default {
  components: {
    VueTreeList
  },
  data () {
    return {
      newTree: {},
      data: new Tree([
        {
          name: 'Node 1',
          id: 1,
          pid: 0,
          dragDisabled: true,
          children: [
            {
              name: 'Node 1-2',
              id: 2,
              isLeaf: true,
              pid: 1
            }
          ]
        },
        {
          name: 'Node 2',
          id: 3,
          pid: 0,
          dragDisabled: true
        },
        {
          name: 'Node 3',
          id: 4,
          pid: 0
        }
      ])
    }
  },
  methods: {
    addNode: function () {
      var node = new TreeNode({ name: 'new node', isLeaf: false })
      if (!this.data.children) this.data.children = []
      this.data.addChildren(node)
    },

    getNewTree: function () {
      var vm = this
      function _dfs (oldNode) {
        var newNode = {}

        for (var k in oldNode) {
          if (k !== 'children' && k !== 'parent') {
            newNode[k] = oldNode[k]
          }
        }

        if (oldNode.children && oldNode.children.length > 0) {
          newNode.children = []
          for (var i = 0, len = oldNode.children.length; i < len; i++) {
            newNode.children.push(_dfs(oldNode.children[i]))
          }
        }
        return newNode
      }

      vm.newTree = _dfs(vm.data)
    },

    onClick(model) {
      console.log(model)
    }
  }
}

道具 (props)

default-tree-node-name

默认树节点名称

Default name for new treenode.

新treenode的默认名称。

default-leaf-node-name

默认叶子节点名称

Default name for new leafnode.

新LeafNode的默认名称。

大事记 (events)

click

点击

<vue-tree-list @click="onClick" ...
...
onClick(model) {
  console.log(model)
}
...

禁止拖动 (Forbid dragging)

Use dragDisabled to forbid dragging:

使用dragDisabled禁止拖动：

data: new Tree([
  {
    name: 'Node 1',
    id: 1,
    pid: 0,
    dragDisabled: true,
  ...

翻译自: https://vuejsexamples.com/a-vue-component-for-tree-structure/

vue 结构树组件