使用vue自定义组件实现树形列表

最近公司做新项目用的是vue，有一个功能做一个树形列表由于之前一直用的是jquery操作dom,刚接触vue走了不少弯路，特意写博客记录一下

一、js自定义一个组件

 

    <script type="text/template" id="tpl">
           <ol class="dd-list" style="margin-left:60px;">
                <li class="dd-item dd2-item dept-name" style="margin-bottom:10px" v-for="(item,index) in model" :num="index" @click.self="toggle(item.childTreeNode)" :key="item.id">
                     <span style="position:absolute;top:-2px;left:-52px;" class="dd-item"><img v-bind:src="item.imageUrl" width="40px;" height="40px;"></span>
                     <div class="dd2-content" style="cursor:pointer;">
                         { {item.categoryName}} <span style="padding-left:20px;color:red;" @click="toggle(item.childList,item)">+</span>
                        <div style="margin-left:20px;margin-top:-20px;margin-left:300px;">
                             <a class="green dept-edit" href="#" style="text-decoration:none;" >
                            编辑 <i class="ace-icon"></i>
                             </a>
               &n