Vue組件模板形式實現對象數組數據循環為樹形結構(實例代碼)

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

<script type="text/x-template" id="table-component-template">
 <div class="tem">
 <div class="tem-p">
 <div v-on:click="toggleClick"><i v-bind:style="{'visibility':list.number!=0?'visible':'hidden'}">{{list.number}}</i><span>{{list.name}}</span></div>
 <!--綁定數據-->
 <div><span>{{list.energyone}}</span></div>
 <div><span>{{list.energytwo}}</span></div>
 <div><span>{{list.energythree}}</span></div>
 <!--綁定class，使數值顯示出區分-->
 <div><span v-bind:class="{'isgreen':list.huanRatio<0,'isred':list.huanRatio>100}">{{list.huanRatio}}<em>%</em></span></div>
 <div><span v-bind:class="{'isgreen':list.tongRatio<0,'isred':list.tongRatio>100}">{{list.tongRatio}}<em>%</em></span></div>
 </div>
 <div class="tem-c">
 <!-- 子組件 -->
 <table-component v-for="itemc in list.child" :list="itemc"></table-component>
 </div>
 </div>
</script>

/* 數據結構 */
 var ko_vue_data=[
 {
 name: "總能耗",
 number:"0",
 energyone: 14410,
 energytwo: 1230,
 energythree: 1230,
 huanRatio: -36.8,
 tongRatio: 148.5,
 child: [
 {
 name: "租戶電耗",
 number:"1",
 energyone: 14410,
 energytwo: 1230,
 energythree: 1230,
 huanRatio: -36.8,
 tongRatio: 148.5,
 child: []
 },
 {
 name: "公共用電",
 number:"2",
 energyone: 14410,
 energytwo: 1230,
 energythree: 1230,
 huanRatio: -36.8,
 tongRatio: 148.5,
 child: [
 {
 name: "暖通空調",
 number:"2.1",
 energyone: 14410,
 energytwo: 1230,
 energythree: 1230,
 huanRatio: -36.8,
 tongRatio: 148.5,
 child: [
 {
 name: "冷站",
 number:"2.1.1",
 energyone: 14410,
 energytwo: 1230,
 energythree: 1230,
 huanRatio: -36.8,
 tongRatio: 148.5,
 child: [
 {
 name: "冷水機組",
 number:"2.1.1.1",
 energyone: 14410,
 energytwo: 1230,
 energythree: 1230,
 huanRatio: -36.8,
 tongRatio: 148.5,
 child: []
 }
 ]
 },
 {
 name: "熱力站",
 number: "2.1.2",
 energyone: 14410,
 energytwo: 1230,
 energythree: 1230,
 huanRatio: -36.8,
 tongRatio: 148.5,
 child: []
 }
 ]
 }
 ]
 }
 ]
 }
 ];
 /* 注冊組件 */
 Vue.component('table-component', {
 template:"#table-component-template",//模板
 props:['list'],//傳遞數據
 computed:{//計算屬性
 isFolder: function () {//判斷數據有沒有子集，此效果中暫沒用到，有需要的可以看下具體使用方式
 return this.list.child && this.list.child.length > 0;
 }
 },
 methods:{
 /* 展開折疊操作 */
 toggleClick:function(event){
 event.stopPropagation();//阻止冒泡
 var _this = $(event.currentTarget);//點擊的對象
 if (_this.parent().next().is(":visible")) {
 _this.parent().next().slideUp();
 } else {
 _this.parent().next().slideDown();
 }
 }
 }
 });
 /* 創建實例 */
 new Vue({
 el:"#table-component-div",//掛載dom
 data:{
 data1:ko_vue_data//數據
 }
 })

.tem-p{
 clear: both;
 border-bottom: 1px solid #dddddd;
 height: 30px;
 line-height: 30px;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 }
 .tem-p>div{
 float: left;
 width:100px;
 box-sizing: border-box;
 -ms-text-overflow: ellipsis;
 text-overflow: ellipsis;
 white-space:nowrap;
 overflow: hidden;
 text-align: center;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 height: 100%;
 border-right: 1px solid #dddddd;
 }
 .tem-p>div:first-of-type{
 width: 298px;
 text-align: left;
 }
 .tem>.tem-c .tem-p>div:first-of-type{
 padding-left: 30px;
 }
 .tem>.tem-c .tem-c .tem-p>div:first-of-type{
 padding-left: 60px;
 }
 .tem>.tem-c .tem-c .tem-c .tem-p>div:first-of-type{
 padding-left: 90px;
 }
 .tem>.tem-c .tem-c .tem-c .tem-c .tem-p>div:first-of-type{
 padding-left: 120px;
 }
 .tem>.tem-c .tem-c .tem-c .tem-c .tem-p{
 background-color: #f8f8f8;
 }
 .tem>.tem-c .tem-c .tem-c .tem-c .tem-c .tem-p>div:first-of-type{
 padding-left: 150px;
 }
 .lastChild{
 background: #f8f8f8;
 }
 .isred{
 color: red;
 }
 .isgreen{
 color: green;
 }