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;    }