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         }

好了，到这里就所有的都写完了，希望可以帮助有需要的人，如果有更好建议，请留言，谢谢。

 

posted @ 2017-07-31 15:21  yn_zihuatanejo  阅读(6147)  评论(0)  编辑  收藏  举报