VUE递归树形目录（vue递归组件）的使用

1、html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script src="js/vue.js"></script>
</head>
<body>
　　　　<!-- 递归模板 -->
        <template id="diguiTempTest">
            <li>
                 <div :class="{bold: isFolder}">
                      {{model.data.menuName}}
                </div>
                
                <ul v-if="isFolder">
                    <item class="item" :model="test" v-for="test in model.childTreeNode"> </item>
                </ul>
                
            </li>
        </template>
</div>
<h1>递归组件测试</h1>
<div id="diguiTest">
    <ul v-for="model in message"> 
        <item class="item" :model="model"></item>
    </ul>
</div>

<input type="button"  value="更改" onclick="test6666()"/>
</body>
</html>

2、js

<script type="text/javascript">
    
Vue.component('item', {
  template: '#diguiTempTest',
  props: ['model'],
  computed: {
    isFolder: function () {
        if(this.model.childTreeNode.length == 0) {
            return false;
        }else {
            return true;
        }
    }
  }
})
 
var vm = new Vue({
        el : "#diguiTest",
        data : {
            message : [{
                "id": "1",
                "data": {
                    "menuName": "项目管理",
                    "menuCode": "",
                },
                "childTreeNode": [{
                    "data": {
                        "menuName": "项目",
                        "menuCode": "BusProject",
                    },
                    "childTreeNode": []
                }, {
                    "data": {
                        "menuName": "我的任务",
                        "menuCode": "BusProject",
                    },
                    "childTreeNode": []
                }, {
                    "data": {
                        "menuName": "人员周报",
                        "menuCode": "BusProject",
                    },
                    "childTreeNode": []
                }]
            }, {
                "id": "2",
                "data": {
                    "menuName": "数据统计",
                    "menuCode": "BusClock",
                },
                "childTreeNode": []
            }, {
                "id": "3",
                "data": {
                    "menuName": "人事管理",
                    "menuCode": "",
                },
                "childTreeNode": []
            }, {
                "id": "4",
                "data": {
                    "menuName": "基础管理",
                    "menuCode": "",
                },
                "childTreeNode": []
            }]
        },

    })
    
    function test6666() {
        var data = [{
                "id": "1",
                "data": {
                    "menuName": "项目管理6966",
                    "menuCode": "",
                },
                "childTreeNode": [{
                    "data": {
                        "menuName": "项目666",
                        "menuCode": "BusProject",
                    },
                    "childTreeNode": []
                }, {
                    "data": {
                        "menuName": "我的任务",
                        "menuCode": "BusProject",
                    },
                    "childTreeNode": []
                }, {
                    "data": {
                        "menuName": "人员周报",
                        "menuCode": "BusProject",
                    },
                    "childTreeNode": []
                }]
            }, {
                "id": "2",
                "data": {
                    "menuName": "数据统计",
                    "menuCode": "BusClock",
                },
                "childTreeNode": []
            }, {
                "id": "3",
                "data": {
                    "menuName": "人事管理",
                    "menuCode": "",
                },
                "childTreeNode": []
            }, {
                "id": "4",
                "data": {
                    "menuName": "基础管理",
                    "menuCode": "",
                },
                "childTreeNode": []
            }]
    }
</script>

3、结果

VUE递归树形目录（vue递归组件）的使用

推荐阅读