1 //Tree.vue
  2 <template>
  3   <li>
  4  <span @click="toggle">
  5        <i v-if="isFolder" class="el-icon-error" :class="[open ? ‘folder-open‘: ‘folder‘]"></i>
  6        <i v-if="!isFolder" class="icon el-icon-success"></i>
  7        {{ model.menuName }}
 
  8  </span>
  9       <ul v-show="open" v-if="isFolder">
 10         <tree-menu v-for="item in model.children" :model="item"></tree-menu>
 11       </ul>
 12   </li>
 13 </template>
 14 <script>
 15   export default {
 16     name: ‘treeMenu‘,
 17     props: [
 
‘model‘],
 18     data() {
 19       return {
 20         open: true,
 21       }
 22     },
 23     computed: {
 24       isFolder: function () {
 25         return this.model.children && this.model.children.length//如果有children就isFolder=true,然後就展示循環遍歷自己的樹tree結構；
 26       }
 27     },
 28     methods: {
 
 29       toggle: function () {//切換關閉，展開，
 30         if (this.isFolder) {
 31           this.open = !this.open
 32         }
 33       }
 34     }
 35   }
 36 </script>
 37 <style>
 38   ul {
 39     list-style: none;
 40   }
 41   i.icon {
 42     display: inline-block;
 43     width: 15px;
 44     height: 15px;
 45     background-repeat: no-repeat;
 46     vertical-align: middle;
 47   }
 48   .tree-menu li {
 49     line-height: 1.5;
 50   }
 51 </style>
 52 
 53 //views/tree/index.vue
 54 <template>
 55   <div class="tree-menu">
 56     <ul v-for="menuItem in theModel">
 57       <tree-menu :model="menuItem"></tree-menu>
 58     </ul>
 59   </div>
 60 </template>
 61 <script>
 62   var myData = [
 63     {
 64       ‘id‘: ‘1‘,
 65       ‘menuName‘: ‘基礎管理‘,
 66       ‘menuCode‘: ‘10‘,
 67       ‘children‘: [
 68         {
 69           ‘menuName‘: ‘用戶管理‘,
 70           ‘menuCode‘: ‘11‘
 71         },
 72         {
 73           ‘menuName‘: ‘角色管理‘,
 74           ‘menuCode‘: ‘12‘,
 75           ‘children‘: [
 76             {
 77               ‘menuName‘: ‘管理員‘,
 78               ‘menuCode‘: ‘121‘
 79             },
 80             {
 81               ‘menuName‘: ‘CEO‘,
 82               ‘menuCode‘: ‘122‘,
 83               ‘children‘: [
 84                 {
 85                   ‘menuName‘: ‘管理員‘,
 86                   ‘menuCode‘: ‘121‘
 87                 },
 88                 {
 89                   ‘menuName‘: ‘CEO‘,
 90                   ‘menuCode‘: ‘122‘
 91                 },
 92                 {
 93                   ‘menuName‘: ‘CFO‘,
 94                   ‘menuCode‘: ‘123‘
 95                 },
 96                 {
 97                   ‘menuName‘: ‘COO‘,
 98                   ‘menuCode‘: ‘124‘
 99                 },
100                 {
101                   ‘menuName‘: ‘普通人‘,
102                   ‘menuCode‘: ‘124‘
103                 }
104               ]
105             },
106             {
107               ‘menuName‘: ‘CFO‘,
108               ‘menuCode‘: ‘123‘
109             },
110             {
111               ‘menuName‘: ‘COO‘,
112               ‘menuCode‘: ‘124‘
113             },
114             {
115               ‘menuName‘: ‘普通人‘,
116               ‘menuCode‘: ‘124‘
117             }
118           ]
119         },
120         {
121           ‘menuName‘: ‘權限管理‘,
122           ‘menuCode‘: ‘13‘
123         }
124       ]
125     },
126     {
127       ‘id‘: ‘2‘,
128       ‘menuName‘: ‘商品管理‘,
129       ‘menuCode‘: ‘‘
130     },
131     {
132       ‘id‘: ‘3‘,
133       ‘menuName‘: ‘訂單管理‘,
134       ‘menuCode‘: ‘30‘,
135       ‘children‘: [
136         {
137           ‘menuName‘: ‘訂單列表‘,
138           ‘menuCode‘: ‘31‘
139         },
140         {
141           ‘menuName‘: ‘退貨列表‘,
142           ‘menuCode‘: ‘32‘,
143           ‘children‘: []
144         }
145       ]
146     },
147     {
148       ‘id‘: ‘4‘,
149       ‘menuName‘: ‘商家管理‘,
150       ‘menuCode‘: ‘‘,
151       ‘children‘: []
152     }
153   ];
154   import treeMenu from ‘../../components/Tree/Tree‘
155   export default {
156     components: {
157       treeMenu,
158     },
159     data() {
160       return {
161         theModel: myData
162       }
163     }
164   }
165 </script>

回調形成樹形結構tree