vue框架 --- 树形列表的基础实现

树形列表： 可以无限次递归显示

设想： 递归组件 + 控制元素的显隐（dom操作/vue数据控制）

第一步：实现递归组件 伪代码

    // 引用组件的页面 v-if="item.children" 不成为死循环
        <tree-component :propdata='data'  v-if="item.children"></tree-component>
        ...
        // 递归数据
        data: [{
            name: '1级',
            url: '/url1',
            children: [{
                name: '2级',
                url: '/url2'
                children: [{
                    name: '3级',
                    url: '/url3'
                }]
            }]
        }]
复制代码

    // 子组件
    <div class="container">
        <div v-for="item in propdata" class="item-div" @click="handleClick($event)">
            <p>{
   {item.name}}<p>
            // 递归核心
            <tree-component  v-if="item.children" :propdata="item.children"></tree-component>
        </div>
    </div>
    new Vue({
        name: 'treeComponent' // 当前组件定义名字属性，才能被递归引用
    })
复制代码

第二步：控制元素的显隐

渲染出的页面大概

<div class="container">
     <div class="item-div"> 
        <p>上一级</p>
        <div class="container">
            <p> 子元素 </p>
            ...
        </div>
    </div>
</div>
复制代码

1. dom元素直接隐藏 
-- 只要会js的display,就能写
-- 弃用：1.vue最好不直接操作dom 2.不好控制动画，子级内容显示隐藏应该有上下收缩

<div class="container">
 <div v-for="item in propdata" class="item-div" @click="handleClick