Vue組件模板形式實現對象數組數據迴圈為樹形結構

數據結構為數組中包含對象--樹形結構，用Vue組件的寫法實現以下的效果：

樹形列表，縮進顯示層級，第5級數據加底色，數據樣式顯色，點擊展開摺疊數據。本文為用Vue實現方式，另有一篇為用knockout.js的實現方法。

html代碼

1 <div id="table-component-div">
2     <table-component  v-for="item in data1" v-bind:list="item"></table-component>
3 </div>

組件模板代碼

 1 <script type="text/x-template" id="table-component-template">
 2     <div class="tem">
 3         <div class="tem-p">
 4             <div v-on:click="toggleClick"><i v-bind:style="{'visibility':list.number!=0?'visible':'hidden'}">{{list.number}}</i><span>{{list.name}}</span></div>
 5             <!--綁定數據-->
 6             <div><span>{{list.energyone}}</span></div>
 7             <div><span>{{list.energytwo}}</span></div>
 8             <div><span>{{list.energythree}}</span></div>
 9             <!--綁定class，使數值顯示出區分-->
10             <div><span v-bind:class="{'isgreen':list.huanRatio<0,'isred':list.huanRatio>100}">{{list.huanRatio}}<em>%</em></span></div>
11             <div><span v-bind:class="{'isgreen':list.tongRatio<0,'isred':list.tongRatio>100}">{{list.tongRatio}}<em>%</em></span></div>
12         </div>
13         <div class="tem-c">
14             <!-- 子組件 -->
15             <table-component v-for="itemc in list.child" :list="itemc"></table-component>
16         </div>
17     </div>
18 </script>

JavaScript代碼

  1 /* 數據結構 */
  2         var ko_vue_data=[
  3             {
  4                 name: "總能耗",
  5                 number:"0",
  6                 energyone: 14410,
  7                 energytwo: 1230,
  8                 energythree: 1230,
  9                 huanRatio: -36.8,
 10                 tongRatio: 148.5,
 11                 child: [
 12                     {
 13                         name: "租戶電耗",
 14                         number:"1",
 15                         energyone: 14410,
 16                         energytwo: 1230,
 17                         energythree: 1230,
 18                         huanRatio: -36.8,
 19                         tongRatio: 148.5,
 20                         child: []
 21                     },
 22                     {
 23                         name: "公共用電",
 24                         number:"2",
 25                         energyone: 14410,
 26                         energytwo: 1230,
 27                         energythree: 1230,
 28                         huanRatio: -36.8,
 29                         tongRatio: 148.5,
 30                         child: [
 31                             {
 32                                 name: "暖通空調",
 33                                 number:"2.1",
 34                                 energyone: 14410,
 35                                 energytwo: 1230,
 36                                 energythree: 1230,
 37                                 huanRatio: -36.8,
 38                                 tongRatio: 148.5,
 39                                 child: [
 40                                     {
 41                                         name: "冷站",
 42                                         number:"2.1.1",
 43                                         energyone: 14410,
 44                                         energytwo: 1230,
 45                                         energythree: 1230,
 46                                         huanRatio: -36.8,
 47                                         tongRatio: 148.5,
 48                                         child: [
 49                                             {
 50                                                 name: "冷水機組",
 51                                                 number:"2.1.1.1",
 52                                                 energyone: 14410,
 53                                                 energytwo: 1230,
 54                                                 energythree: 1230,
 55                                                 huanRatio: -36.8,
 56                                                 tongRatio: 148.5,
 57                                                 child: []
 58                                             }
 59                                         ]
 60                                     },
 61                                     {
 62                                         name: "熱力站",
 63                                         number: "2.1.2",
 64                                         energyone: 14410,
 65                                         energytwo: 1230,
 66                                         energythree: 1230,
 67                                         huanRatio: -36.8,
 68                                         tongRatio: 148.5,
 69                                         child: []
 70                                     }
 71                                 ]
 72                             }
 73                         ]
 74                     }
 75                 ]
 76             }
 77         ];
 78         /* 註冊組件 */
 79         Vue.component('table-component', {
 80             template:"#table-component-template",//模板
 81             props:['list'],//傳遞數據
 82             computed:{//計算屬性
 83                 isFolder: function () {//判斷數據有沒有子集，此效果中暫沒用到，有需要的可以看下具體使用方式
 84                     return this.list.child && this.list.child.length > 0;
 85                 }
 86             },
 87             methods:{
 88                 /* 展開摺疊操作 */
 89                 toggleClick:function(event){
 90                     event.stopPropagation();//阻止冒泡
 91                     var _this = $(event.currentTarget);//點擊的對象
 92                     if (_this.parent().next().is(":visible")) {
 93                         _this.parent().next().slideUp();
 94                     } else {
 95                         _this.parent().next().slideDown();
 96                     }
 97                 }
 98             }
 99         });
100         /* 創建實例 */
101         new Vue({
102             el:"#table-component-div",//掛載dom
103             data:{
104                 data1:ko_vue_data//數據
105             }
106         })

數據顯示完畢，接下來是樣式效果，縮進顯示層級及底色顯示。

css代碼

 1 .tem-p{
 2             clear: both;
 3             border-bottom: 1px solid #dddddd;
 4             height: 30px;
 5             line-height: 30px;
 6             -webkit-box-sizing: border-box;
 7             -moz-box-sizing: border-box;
 8             box-sizing: border-box;
 9         }
10         .tem-p>div{
11             float: left;
12             width:100px;
13             box-sizing: border-box;
14             -ms-text-overflow: ellipsis;
15             text-overflow: ellipsis;
16             white-space:nowrap;
17             overflow: hidden;
18             text-align: center;
19             -webkit-box-sizing: border-box;
20             -moz-box-sizing: border-box;
21             box-sizing: border-box;
22             height: 100%;
23             border-right: 1px solid #dddddd;
24         }
25         .tem-p>div:first-of-type{
26             width: 298px;
27             text-align: left;
28         }
29         .tem>.tem-c .tem-p>div:first-of-type{
30             padding-left: 30px;
31         }
32         .tem>.tem-c .tem-c .tem-p>div:first-of-type{
33             padding-left: 60px;
34         }
35         .tem>.tem-c .tem-c .tem-c .tem-p>div:first-of-type{
36             padding-left: 90px;
37         }
38         .tem>.tem-c .tem-c .tem-c .tem-c .tem-p>div:first-of-type{
39             padding-left: 120px;
40         }
41         .tem>.tem-c .tem-c .tem-c .tem-c .tem-p{
42             background-color: #f8f8f8;
43         }
44         .tem>.tem-c .tem-c .tem-c .tem-c .tem-c .tem-p>div:first-of-type{
45             padding-left: 150px;
46         }
47         .lastChild{
48             background: #f8f8f8;
49         }
50         .isred{
51             color: red;
52         }
53         .isgreen{
54             color: green;
55         }

好了，到這裡就所有的都寫完了，希望可以幫助有需要的人，如果有更好建議，請留言，謝謝。