数据结构为数组中包含对象--树形结构，用Vue组件的写法实现以下的效果：
树形列表，缩进显示层级，第5级数据加底色，数据样式显色，点击展开折叠数据。本文为用Vue实现方式，另有一篇为用knockout.js的实现方法。
html代码
123
组件模板代码
1
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",//挂载dom103 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 } 好了，到这里就所有的都写完了，希望可以帮助有需要的人，如果有更好建议，请留言，谢谢。