VUE開發一個元件——Vue tree樹形結構

前言

Vue開發一個簡潔樹形結構元件，元件遞歸元件自身，生成dom。

預覽圖

代碼預覽

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>           

複制