Vue

VUE开发一个组件——Vue tree树形结构

特别声明:如果您喜欢小站的内容,可以点击 终身VIP¥188.00元 包年VIP¥88.00元 包季VIP¥28.00 包月VIP¥10.00元 进行全站阅读。 如果您对付费阅读有任何建议或想法,欢迎发送邮件至: 864479410@qq.com,或添加QQ:864479410(^_^)

前言

Vue开发一个简洁树形结构组件,组件递归组件自身,生成dom。

预览图

web秀

代码预览

tree-item

通过computed计算hasChild属性,判断当前级别是否还有children,有继续循环组件,依次执行下去,直到没有找到children结束。点击每个item时,也判断是否还有children,有则展开。

<template>
    <li>
        <span @click="toggle">
            <em v-if="hasChild" class="icon">{{open ? '-' : '+'}}</em>
            <em v-if="!hasChild" class="icon file-text"></em>
            {{ data.name }}
        </span>
        <ul v-show="open" v-if="hasChild">
            <tree-item v-for="(item, index) in data.children" :data="item" :key="index"></tree-item>
        </ul>
    </li>
</template>

<script>
export default {
    name: 'TreeItem',
    props: {
        data: {
            type: [Object, Array],
            required: true
        }
    },
    data() {
        return {
            open: false
        }
    },
    computed: {
        hasChild() {
            return this.data.children && this.data.children.length
        }
    },
    methods: {
        toggle() {
            if(this.hasChild) {
                this.open = !this.open
            }
        }
    }
}
</script>

<style>
ul {
    list-style: none;
    margin: 10px 0;
}
li {
    padding: 3px 0;
}
li > span {
    cursor: pointer;
    font-size: 14px;
    line-height: 20px;
}
li > span:visited{
    background: #fff;
}
em.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    background-repeat: no-repeat;
    vertical-align: middle;
}
.tree-menu li {
    line-height: 1.5;
}
</style>

tree

<template>
    <div class="tree-menu">
        <ul v-for="item in data">
            <c-tree-item :data="item"></c-tree-item>
        </ul>
    </div>
</template>

<script>


import cTreeItem from './tree-item'
export default {
    props: {
        data: {
            type: [Object, Array],
            required: true
        }
    },
    components: {
        cTreeItem
    }
}
</script>

模拟数据

var myData = [
    {
        'name': 'Web秀',
        'children': [{
            'name': 'web前端',
            'children': [{
                'name': 'CSS'
            }, {
                'name': 'JavaScript'
            }, {
                'name': 'Vue'
            }, {
                'name': '小程序'
            }, {
                'name': 'Three.js'
            }]
        }, {
            'name': '服务器'
        }, {
            'name': '工具类'
        }]
    }, {
        'name': '今日头条',
        'children': [{
            'name': '图片'
        }, {
            'name': '新闻',
            'children': []
        }]
    }, {
        'name': 'Angular'
    }
];
<template>
   <cTree :data="myData"></cTree>
</template>

切记:你的数据必须要有结尾,不能无限循环下去,会导致内存泄漏。

源码地址

github地址: vue-h5-trees

(224)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

评论:

1 条评论,访客:1 条,博主:0 条
  1. 小白
    小白发布于: 

    components 写错了

发表评论

电子邮件地址不会被公开。 必填项已用*标注