今天公司提了一个需求，需要实现一个节点树的功能，刚好最近在学习 vue ，所以就用其来实现了一个小例。
使用 vue2 版本，实现效果如下：

            root

    A                   B

C       D           E        F

创建 tree 组件

首先是利用组件实现 tree，主要核心思想就是如果存在 children 节点的话，就递归调用 tree 组件。

定义组件


const Tree = Vue.extend({
    name: 'tree',   // 使用标签时候的名字
    template: '#tree',  //模板，我这里使用 template 实现，tree 是 template 的 id
    props: ['node', 'length'],  // 组件之间传递的值, node 节点信息，length 当前节点 children 的长度，为了样式管理
    computed: {
        cls: function() {
            // 根据 chilren 的长度分配宽度，定义 class
            if (this.length > 0) {
                return 'col-md-' + (12 / this.length);
            } else {
                return 'col-md-12';
            }
        }
    }
});

实现模板

<template id="tree">
    <div :class="cls">
        <div v-if="node.name">
            <div>{{ node.name }}</div>
        </div>
        <!-- 如果存在 children 的话，循环创建节点 -->
        <tree v-if="node.children.length" 
                v-for="row in node.children"
                :node="row"
                :length="node.children.length">
        </tree>
    </div>
</template>

实例化 vue 对象

<div id="app" class="container-fluid form-inline">
    <div class="row text-center">
        <tree :node="root" length="1"></tree>
    </div>
</div>
<script>
var app = new Vue({
    el: '#app',
    data: {
        root: {
            name: 'root',
            children: [
                {
                    name: 'A',
                    children: []
                },
                {
                    name: 'B',
                    children: []
                }
            ]
        }
    },
    components: {
        Tree
    }
});
</script>

操作 [新增/编辑/删除]

下面实现树的集中简单的操作方法。

方法实现

// components Tree 上面添加 methods 实现具体操作

//...

methods: {
    // 添加节点
    add: function() {
        if (val = prompt()) {
            this.node.children.push({
                name: val,
                children: []
            });
        }
    },
    // 编辑节点
    edit: function(node) {
        if (val = prompt()) {
            node.name = val;
        }
    },
    // 删除节点
    remove: function(node) {
        var _this = this;
        if (this.$parent.node) {
            // 找到上级，循环上级 children 列表，删除选中的
            this.$parent.node.children.forEach(function(item, index) {
                if (item.name == node.name) {
                    _this.$parent.node.children.splice(index, 1);
                }
            });
        } else {
            // root 节点
            this.$root.root = {};
        }
    }
}

//...

方法调用

# tree 模板中
...
<div v-if="node.name">
    <div>
        <span @click="edit(node)">{{ node.name }}</span>&nbsp;&nbsp;
        <span @click="add">+</span>&nbsp;&nbsp;
        <span @click="remove(node)">-</span>
    </div>
</div>
...

这样效果就可以实现了，只是很简单的代码，再次体会了 vue 的强大之处。

在这个例子中主要用到了 vue 组件的定义和使用，组件之间参数的传递，使用 props，以及父组件和子组件之间数据的操作。

全部代码

拷贝下面代码，在浏览器中打开，就可以看到效果了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tree</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/vue/2.1.6/vue.js"></script>
</head>
<body>

<div id="app" class="container-fluid form-inline">
    <div class="row text-center">
        <tree :node="root" length="1"></tree>
    </div>
</div>

<template id="tree">
    <div :class="cls">
        <div v-if="node.name">
            <div>
                <span @click="edit(node)">{{ node.name }}</span>&nbsp;&nbsp;
                <span @click="add">+</span>&nbsp;&nbsp;
                <span @click="remove(node)">-</span>
            </div>
        </div>
        <tree v-if="node.children.length" 
                v-for="row in node.children"
                :node="row"
                :length="node.children.length">
        </tree>
    </div>
</template>

<script>
var Tree = Vue.extend({
    name: 'tree',
    props: ['node', 'length'],
    template: '#tree',
    data: function() {
        return {
        }
    },
    computed: {
        cls: function() {
            if (this.length > 0) {
                return 'col-md-' + (12 / this.length);
            } else {
                return 'col-md-12';
            }
        }
    },
    methods: {
        add: function() {
            if (val = prompt()) {
                this.node.children.push({
                    name: val,
                    children: []
                });
            }
        },
        edit: function(node) {
            if (val = prompt()) {
                node.name = val;
            }
        },
        remove: function(node) {
            var _this = this;
            if (this.$parent.node) {
                // 找到上级，循环上级 children 列表，删除选中的
                this.$parent.node.children.forEach(function(item, index) {
                    if (item.name == node.name) {
                        _this.$parent.node.children.splice(index, 1);
                    }
                });
            } else {
                // root 节点
                this.$root.root = {};
            }
        }
    }
});
var app = new Vue({
    el: '#app',
    data: {
        root: {
            name: 'root',
            children: [
                {
                    name: 'A',
                    children: [
                        {name: 'a1', children: []},
                        {name: 'a2', children: []}
                    ]
                },
                {
                    name: 'B',
                    children: []
                }
            ]
        }
    },
    components: {
        Tree
    }
});

</script>
</body>
</html>

©版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 & 作者信息。

End